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 (
    <AppBridgeProvider config={config}>
      <PolarisAppProvider i18n={enPolarisTranslations}>
        <AppProvider locale="en-US" ianaTimezone="America/Los_Angeles">
          <Page title="Example app">
            <SampleComponent />
          </Page>
        </AppProvider>
      </PolarisAppProvider>
    </AppBridgeProvider>
  );
}
```

## 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|