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 apiKeyapiKeystringrequired
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 childrenchildrenReact.ReactNode
Inner content of the application
- Anchor to featuresfeaturesFeaturesConfig
For toggling features
- Anchor to i18ni18nTranslationDictionary | TranslationDictionary[]
The internationalization (i18n) configuration for your Polaris provider.
- Anchor to isEmbeddedAppisEmbeddedAppboolean
Whether the app is loaded inside the Shopify Admin. Default is
true.- Anchor to themethemeThemeName
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;
}Anchor to examplesExamples
Anchor to example-set-up-appproviderSet up AppProvider
Wrap your app in the 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.
Set up AppProvider
/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> ); }
