App provider

The app provider component is required to use Polaris. Without it, the components in your application will not function correctly. You must wrap the root (the top) of your application in the app provider component. We’ve created several examples to show how that’s done.

Translations are provided in the locales folder. When using Polaris, you are able to import translations from all languages supported by the core Shopify product and consume them through the i18n prop.

// en.json is English. Replace with fr.json for French, etc
import translations from '@shopify/polaris/locales/en.json';

ReactDOM.render(
  <AppProvider i18n={translations}>{/* App content */}</AppProvider>,
);

When using Polaris, you don’t need to go through the initialization of the Shopify App Bridge as described in the Shopify Help Center. Instead, configure the connection to the Shopify admin through the app provider component, which wraps all components in an embedded app. The app provider component initializes the Shopify App Bridge using the apiKey and shopOrigin that you provide. The apiKey and the shopOrigin attributes are required. Find the API key for your app in the Apps section of your Shopify Partner Dashboard. Learn how to get and store the shop origin in the Shopify Help Center.

ReactDOM.render(
  <AppProvider apiKey="YOUR_API_KEY" shopOrigin="SHOP_ORIGIN" i18n={{}}>
    <ResourcePicker
      resourceType="Product"
      open={this.state.open}
      onSelection={({selection}) => {
        console.log('Selected products: ', selection);
        this.setState({open: false});
      }}
      onCancel={() => this.setState({open: false})}
    />
  </AppProvider>,
);

Deprecation rationale

As of v3.17.0, using apiKey and shopOrigin on AppProvider to initialize the Shopify App Bridge is deprecated. Support for this will be removed in v5.0 as the underlying Shopify App Bridge library will be removed from Polaris React. Learn more about the deprecation rationale. Use Provider from @shopify/app-bridge-react instead.

To provide access to your initialized Shopify App Bridge instance, we make it available through React’s context. The example below demonstrates how to access the appBridge object from React’s context, in order to use the Redirect action to navigate:

import React from 'react';
import {render} from 'react-dom';
import {AppProvider, AppBridgeContext} from '@shopify/polaris';
import {Redirect} from '@shopify/app-bridge/actions';

class MyApp extends React.Component {
  static contextType = AppBridgeContext;

  componentDidMount() {
    const redirect = Redirect.create(this.context);

    // Go to {appOrigin}/settings
    redirect.dispatch(Redirect.Action.APP, '/settings');
  }

  render() {
    return null;
  }
}

render(
  <AppProvider
    apiKey="YOUR_APP_API_KEY"
    shopOrigin="YOUR_SHOP_ORIGIN"
    i18n={{}}
  >
    <MyApp />
  </AppProvider>,
  document.querySelector('#app'),
);

Deprecation rationale

As of v3.17.0, using the Shopify App Bridge instance in context is deprecated. Support for this will be removed in v5.0 as the underlying Shopify App Bridge library will be removed from Polaris React. More information can be found here. Use the Shopify App Bridge directly instead.

You must include Polaris context in your tests when you use Polaris components.

To make this easier for you, we’ve provided:

• a createPolarisContext() function to create the Polaris context for you
• a polarisContextTypes variable that contains all the necessary context types
• a fully-working example app with Jest and Enzyme you can reference