app-provider

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

AppProvider is required at application root

App provider is a required component that enables sharing global settings throughout the hierarchy of your application. The app provider component must wrap the root of your application. Without it, the components in your application will not function correctly.

AppProvider with i18n prop for translations

When using AppProvider with an i18n prop, AppProvider will provide these translations to polaris components. Translations are provided in the locales folder and can be imported from all languages supported by the core Shopify product.

Single locale translation example

For a project with only one locale, import AppProvider from '@shopify/polaris' and translations from '@shopify/polaris/locales/en.json' (or other language), then pass the JSON content into the i18n prop: <AppProvider i18n={translations}>{/* App content */}</AppProvider>

Multiple locale translation with react-i18n

For projects supporting multiple locales, use @shopify/react-i18n with useI18n hook and dynamic imports to load only the translations needed. Configure it with an id, fallback translations, and a translations function that imports locale files dynamically using webpack chunks. Pass the i18n.translations array to AppProvider.

AppProvider linkComponent prop for custom routing

By default Polaris renders Link elements as <a> tags, which trigger full page refresh. The linkComponent prop allows you to customize how links behave by injecting your router's own Link component (such as react-router's Link) to enable client-side navigation instead.

Custom linkComponent implementation pattern

When providing a custom linkComponent to AppProvider, it should accept children, url, external, ref, and rest props. External links or links matching the pattern /^(?:[a-z][a-z\d+.-]*:|\/)/ should render as regular <a> tags with target='_blank' and rel='noopener noreferrer'. Internal path-based links should use the router's Link component.

PolarisTestProvider for testing

When testing Polaris components, you must include Polaris context. Shopify provides a PolarisTestProvider component that provides the Polaris contexts for testing purposes.

AppProvider features prop changes

The AppProvider features prop no longer accepts the keys polarisSummerEditions2023 and polarisSummerEditions2023ShadowBevelOptOut. If these were the only features passed, the features prop can be safely removed completely from the AppProvider. Otherwise, remove these specific feature keys from the features prop.

Give your agent this brain