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.

When using Polaris, you don’t need to go through the initialization of the Shopify App Bridge as described in the docs. Instead, configure the connection to the Shopify admin through the app provider component, which must wrap all components in an embedded app. This component initializes the Shopify App Bridge using the apiKey you provide. The apiKey attribute is required and can be found in the Shopify Partner Dashboard.

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

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 * as PropTypes from 'prop-types';
import {AppProvider} from '@shopify/polaris';
import {Redirect} from '@shopify/app-bridge/actions';

class MyApp extends React.Component {
  // This line is very important! It tells React to attach the `polaris`
  // object to `this.context` within your component.
  static contextTypes = {
    polaris: PropTypes.object,
  };

  redirectToSettings() {
    const redirect = Redirect.create(this.context.polaris.appBridge);

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

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

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