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
debug
boolean
Prints logs of each message passed through the EASDK
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

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.