App
Sets up the Polaris and injects the App Bridge script.
This component extends the component from Polaris, and accepts all of its props except for , which is overridden to use the Remix Link component.
Anchor to appproviderpropsAppProviderProps
Props for the component.
- Anchor to apiKeyapiKeyapiKeystringstringrequiredrequired
The API key for your Shopify app. This is the
from the Partner Dashboard.When using the Shopify CLI, this is the
environment 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 isEmbeddedAppisEmbeddedAppisEmbeddedAppbooleanboolean
Whether the app is loaded inside the Shopify Admin. Default is
true.- Anchor to themethemethemeThemeNameThemeName
FeaturesConfig
- [key: string]
boolean | undefined - dynamicTopBarAndReframe
boolean
TranslationDictionary
- [key: string]
string | TranslationDictionary
/app/routes/**\/*.ts
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> ); }
