App
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 component.
- Anchor to apiKeyapi
Keyapi Key stringstringrequiredrequired The API key for your Shopify app. This is the
Client IDfrom the Partner Dashboard.When using the Shopify CLI, this is the
SHOPIFY_API_KEYenvironment variable. If you're using the environment variable, then you need to pass it from the loader to the component.- Anchor to childrenchildrenchildrenReact.ReactNodeReact.ReactNode
Inner content of the application
- Anchor to featuresfeaturesfeaturesFeaturesConfigFeaturesConfig
For toggling features
- Anchor to i18ni18ni18nTranslationDictionary | TranslationDictionary[]TranslationDictionary | TranslationDictionary[]
The internationalization (i18n) configuration for your Polaris provider.
- Anchor to isEmbeddedAppis
Embedded Appis Embedded App booleanboolean Whether the app is loaded inside the Shopify Admin. Default is
true.- Anchor to themethemethemeThemeNameThemeName
Example
Examples
Description
Wrap your app in the `AppProvider` component and pass in your API key.
Example
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> ); }Description
Pass in a different locale for Polaris to translate its components.
Example
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> ); }
