App provider

App provider is a required component that enables sharing global settings throughout the hierarchy of your application.

Examples

AppProvider works by default without any additional options passed to it.

Drag to resize example

Props

apiKey
string
The API key for your application from the Partner dashboard
forceRedirect
boolean
Forces a redirect to the relative admin path when not rendered in an iframe
i18n
TranslationDictionary | TranslationDictionary[]
A locale object or array of locale objects that overrides default translations
linkComponent
ReactComponent
A custom component to use for all links used by Polaris components
shopOrigin
string
The current shop’s origin, provided in the session from the Shopify API (to be provided without the https://)
theme
Theme
Custom logos and colors provided to select components

Best practices

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.


Initializing the Shopify App Bridge

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">
    <ResourcePicker
      resourceType="Product"
      open={this.state.open}
      onSelection={({selection}) => {
        console.log('Selected products: ', selection);
        this.setState({open: false});
      }}
      onCancel={() => this.setState({open: false})}
    />
  </AppProvider>,
);

Access to the Shopify App Bridge instance

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'),
);

Testing components

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