Choose a version:

AppProvider

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

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;
}

Examples

/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>
  );
}

Anchor to relatedRelated

Learn more about App Bridge.App bridge

Learn more about Polaris.Polaris

Was this page helpful?