> ## Documentation Index
> Fetch the complete documentation index at: https://engage-docs.frigade.com/llms.txt
> Use this file to discover all available pages before exploring further.

# V1 SDK Guide

## Upgrading from V1 to V2

This guide outlines some of the biggest changes you need to make to upgrade from V1 to V2. Scroll down to the bottom for instructions on how to [use V1 and V2 at the same time](/sdk/advanced/v1#running-both-v1-and-v2-of-the-sdk).

### Provider theme

In V2, we have a [fully-fledged theming system](/sdk/styling/theming) that allows you to customize every token in our design system. If you used V1's theme colors, you can convert them to V2 like so:

```jsx theme={"system"}
// V1
<FrigadeProvider
  config={{
    defaultAppearance: {
      theme: {
        colorText: '#3d3d3d',
        colorTextSecondary: '#494949',
        colorTextOnPrimaryBackground: '#fff',
        colorPrimary: '#2956B5',
        colorBorder: '#E2E2E2',
      }
    }
  }}
>

// V2
<Frigade.Provider
  theme={{
    colors: {
      neutral: {
        // Replaces colorBorder
        border: '#E2E2E2',

        // Replaces colorText
        foreground: '#3d3d3d'
      },
      primary: {
        // Replaces colorTextOnPrimaryBackground
        foreground: '#fff',

        // Replaces colorPrimary
        surface: '#2956B5'
      }
    }
  }}
>
```

Note that `colorTextSecondary` was deprecated and doesn't have a V2 equivalent.

### Global style overrides

We no longer wrap descendents of the Frigade Provider in a container element, as we found that for most users adding an extra wrapper to the DOM at (or near) the top was more disruptive than helpful.

As a result, we no longer support the `config.defaultAppearance.styleOverrides` property that existed on `FrigadeProvider` in V1.

We now recommend that you author global styles using your existing CSS workflow.

### Component style overrides

We use [Emotion's CSS prop](/sdk/styling/css-overrides) in V2, so you can write any CSS that Emotion supports directly on any component:

```jsx theme={"system"}
// V1
<FrigadeAnnouncement
  appearance={{
    styleOverrides: {
      'button': {
        backgroundColor: 'fuchsia'
      }
    }
  }}
/>

// V2
<Frigade.Announcement
  css={{
    '.fr-button-primary': {
      backgroundColor: 'fuchsia',

      '&:hover': {
        backgroundColor: 'lilac'
      }
    },
  }}
/>
```

### Important difference between V1 `styleOverrides` and V2 `css` props:

The V2 `css` prop accepts a style object, which means that if you're using V1's `styleOverrides` prop to pass Tailwind classNames through to sub-components, you'll need to update your code to pass Tailwind's [arbitrary variants](https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants), e.g.:

```jsx theme={"system"}
// V1
<FrigadeAnnouncement
  appearance={{
    styleOverrides: {
      'button': 'w-full'
    }
  }}
/>

// V2
<Frigade.Announcement
  className="[&_button]:w-full"
/>
```

### Navigation

The `navigate` prop is now a top-level prop on Provider, it is no longer nested inside `config`:

```jsx theme={"system"}
// V1
<FrigadeProvider
  config={{
    navigate: (url, target): void => {
      if (target === "_blank") {
        window.open(url, "_blank");
      } else {
        router.push(url);
      }
    },
  }}
>

// V2
<Frigade.Provider
  navigate={(url, target) => {
    if (target === "_blank") {
      window.open(url, "_blank");
    } else {
      router.push(url);
    }
  }}
>
```

### Event handlers

The catch-all `onButtonClick` prop has been replaced with individual handlers for `onPrimary`, `onSecondary`, `onDismiss`, and `onComplete`.

Full definitions of each handler are available in our [component docs](/component/announcement#oncomplete)

### Hooks

Our SDK hooks now expose objects from our [JS SDK](https://www.npmjs.com/package/@frigade/js) directly, for example [useFlow](/sdk/hooks/flow) returns an instance of [Flow](/sdk/js/flow), which you can operate directly on as you would in the JS SDK.

***

## Running V1 and V2 together

If you already have a V1 implementation and aren't ready to fully upgrade yet, you can use both V1 and V2 at the same time. This setup allows you to import V1 components from `@frigade/react` and V2 components from `@frigade/reactv2`.

### Instructions

<Steps>
  <Step title="First, install V2 using a package alias:">
    ```json theme={"system"}
    "dependencies": [
    "@frigade/react": "1.x",
    "@frigade/reactv2": "npm:@frigade/react@2.x",
    ]
    ```
  </Step>

  <Step title="Then add the V2 `Provider` above the V1 `FrigadeProvider`:">
    ```tsx theme={"system"}
    import { FrigadeProvider } from "@frigade/react";
    import * as Frigade from "@frigade/reactv2";

    const FRIGADE_API_KEY = "api_public_abcd1234";

    export const App = () => {
      const userId = "...";

      return (
        <Frigade.Provider apiKey={FRIGADE_API_KEY} userId={userId}>
          <FrigadeProvider publicApiKey={FRIGADE_API_KEY} userId={userId}>
            {/* ... */}
          </FrigadeProvider>
        </Frigade.Provider>
      );
    };
    ```
  </Step>
</Steps>

### Sharing state between V1 and V2

When using V1 and V2 together, state is not shared between the two providers. Be sure to call `frigade.reload()` from the [useFrigade() hook](/sdk/hooks/frigade) (V2) and/or `refresh()` from the `useFlows()` hook (V1).