Choose a version:

AppProvider
component

Sets up the Polaris AppProvider and injects the App Bridge script.

This component extends the AppProvider component from Polaris, and accepts all of its props except for linkComponent, which is overridden to use the Remix Link component.

Anchor to appproviderpropsAppProviderProps

Props for the AppProvider component.

Anchor to apiKey apiKey string required: The API key for your Shopify app. This is the Client ID from the Partner Dashboard.

When using the Shopify CLI, this is the SHOPIFY_API_KEY environment variable. If you're using the environment variable, then you need to pass it from the loader to the component.
Anchor to children children React.ReactNode: Inner content of the application
Anchor to features features: For toggling features
Anchor to i18n i18n | []: The internationalization (i18n) configuration for your Polaris provider.
Anchor to isEmbeddedApp isEmbeddedApp boolean: Whether the app is loaded inside the Shopify Admin. Default is true.
Anchor to theme theme ThemeName

AppProviderProps

__APP_BRIDGE_URL
Used internally by Shopify. You don't need to set this.
```
string
```
apiKey
The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard. When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment variable, then you need to pass it from the loader to the component.
```
string
```
children
Inner content of the application
```
React.ReactNode
```
features
For toggling features
```
FeaturesConfig
```
i18n
The internationalization (i18n) configuration for your Polaris provider.
```
TranslationDictionary | TranslationDictionary[]
```
isEmbeddedApp
Whether the app is loaded inside the Shopify Admin. Default is `true`.
```
boolean
```
theme
```
ThemeName
```

export interface AppProviderProps
  extends Omit<PolarisAppProviderProps, 'linkComponent' | 'i18n'> {
  /**
   * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.
   *
   * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment
   * variable, then you need to pass it from the loader to the component.
   */
  apiKey: string;
  /**
   * Whether the app is loaded inside the Shopify Admin. Default is `true`.
   *
   * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}
   */
  isEmbeddedApp?: boolean;
  /**
   * The internationalization (i18n) configuration for your Polaris provider.
   *
   * {@link https://polaris.shopify.com/components/utilities/app-provider}
   */
  i18n?: PolarisAppProviderProps['i18n'];
  /**
   * Used internally by Shopify. You don't need to set this.
   * @private
   */
  __APP_BRIDGE_URL?: string;
}

FeaturesConfig

[key: string]
```
boolean | undefined
```
dynamicTopBarAndReframe
```
boolean
```

export interface FeaturesConfig {
    dynamicTopBarAndReframe?: boolean;
    [key: string]: boolean | undefined;
}

TranslationDictionary

[key: string]
```
string | TranslationDictionary
```

interface TranslationDictionary {
    [key: string]: string | TranslationDictionary;
}

Was this section helpful?

Anchor to examplesExamples

Anchor to example-set-up-appproviderSet up AppProvider

Wrap your app in the AppProvider component and pass in your API key.

Anchor to example-localize-polaris-componentsLocalize Polaris components

Pass in a different locale for Polaris to translate its components.

Was this section helpful?

Set up AppProvider

/app/routes/**\/*.ts

import {authenticate} from '~/shopify.server';

import {AppProvider} from '@shopify/shopify-app-remix/react';

export async function loader({ request }) {

await authenticate.admin(request);

return json({ apiKey: process.env.SHOPIFY_API_KEY });

}

export default function App() {

const { apiKey } = useLoaderData();

return (

</AppProvider>

);

}

examples

Set up AppProvider

description

Wrap your app in the `AppProvider` component and pass in your API key.

/app/routes/**\/*.ts

import {authenticate} from '~/shopify.server';
import {AppProvider} from '@shopify/shopify-app-remix/react';

export async function loader({ request }) {
  await authenticate.admin(request);

  return json({ apiKey: process.env.SHOPIFY_API_KEY });
}

export default function App() {
  const { apiKey } = useLoaderData();

  return (
    <AppProvider isEmbeddedApp apiKey={apiKey}>
      <Outlet />
    </AppProvider>
  );
}

Localize Polaris components

description

Pass in a different locale for Polaris to translate its components.

/app/routes/**\/*.ts

import {authenticate} from '~/shopify.server';
import {AppProvider} from '@shopify/shopify-app-remix/react';

export async function loader({ request }) {
  await authenticate.admin(request);

  return json({
    apiKey: process.env.SHOPIFY_API_KEY,
    polarisTranslations: require("@shopify/polaris/locales/fr.json"),
  });
}

export default function App() {
  const { apiKey, polarisTranslations } = useLoaderData();

  return (
    <AppProvider apiKey={apiKey} i18n={polarisTranslations}>
      <Outlet />
    </AppProvider>
  );
}