The `AppProvider` component enables sharing global settings throughout the hierarchy of your application. ## Setup Import the `AppProvider` from `@shopify/discount-app-components` and pass the shop's locale and timezone. `@shopify/discount-app-components` contains Polaris and AppBridge functionality and must be wrapped in the `Provider` from `@shopify/app-bridge-react` and the `AppProvider` from `@shopify/polaris`. ```jsx?title:'MyApp.jsx' import {Page, AppProvider as PolarisAppProvider} from '@shopify/polaris'; import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react'; import { SampleComponent, AppProvider, } from '@shopify/discount-app-components'; import enPolarisTranslations from '@shopify/polaris/locales/en.json'; import "@shopify/polaris/build/esm/styles.css"; import "@shopify/discount-app-components/build/esm/styles.css"; export default function App() { const config = { // The client ID provided for your application in the Partner Dashboard. apiKey: "api_key", // The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin. host: "example.myshopify.com" }; ... return ( ); } ``` ## Properties |Name|Type|Description|Required| |---|---|---|---| |locale|`string`|The locale of the shop.|Yes| |ianaTimezone|`string`|The shop's time zone as defined by the IANA.|Yes|