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.

Result

Properties

React

HTML

Props

apiKey

string

The API key for your application from the Partner dashboard

debug

boolean

Prints logs of each message passed through the EASDK

True

False

forceRedirect

boolean

Forces a redirect to the relative admin path when not rendered in an iframe

True

False

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

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 EASDK

You must store your API key and the shopOrigin provided by the Shopify API somewhere on the page so you can use them to initialize your application.

// We are accessing the apiKey and shopOrigin
// from content in script tags.
const shopOrigin = document.querySelector('#ShopOrigin').textContent;
const apiKey = document.querySelector('#APIKey').textContent;

ReactDOM.render(
  <AppProvider shopOrigin={shopOrigin} apiKey={apiKey}>
    <ResourcePicker
      open
      products
      onSelection={(resources) => console.log('Selected resources ', resources)}
    />
  </AppProvider>,
);

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

Additional methods

Some functionality of the underlying EASDK API, like displaying a flash message from within your embedded app, can be accessed through various methods. Please note, these methods are scheduled to be removed in a future release of updated Polaris components and the current implementation will be deprecated. At that time, new methods will be provided and the old methods will become backwards compatible.