Skip to main content

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
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 isEmbeddedApp apiKey={apiKey}>
<Outlet />
</AppProvider>
);
}

Anchor to relatedRelated

Learn more about App Bridge.App bridge
Learn more about Polaris.Polaris