Provider

Setup

Import the Provider from @shopify/app-bridge-react. Only one Provider is needed for your application.

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, Loading} from '@shopify/app-bridge-react';

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};
  return (
    <Provider config={config}>
      <Loading />
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);

Accessing the App Bridge client directly

App Bridge React provides access to the App Bridge client app instance using the React Context API. There are two ways to use the context API:

Using Context.Consumer

Use Context.Consumer to get access to the App Bridge client app in a render prop.

import React from 'react';
import {Provider, Loading, Context} from '@shopify/app-bridge-react';

function MyComponent() {
  return (
    <Context.Consumer>
      {app => {
        // Do something with App Bridge `app` instance...
        if (app) {
          app.getState().then(state => console.log(state));
        }

        return (<span>Hello world!</span>);
      }}
    </Context.Consumer>
  );
};

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};

  return (
    <Provider config={config}>
      <MyComponent />
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);

Using Class.contextType

Use Class.contextType to get access to the App Bridge client app in a class component.

import React from 'react';
import {Provider, Loading, Context} from '@shopify/app-bridge-react';

class MyComponent extends React.Component {
  static contextType = Context;

  render() {
    // Do something with App Bridge `app` instance...
    const app = this.context;
    app.getState().then(state => console.log(state));

    return (<span>Hello world!</span>);
  }
}

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};

  return (
    <Provider config={config}>
      <MyComponent />
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);

Props

Name Type Description Required
config AppConfig Your application configuration Yes

AppConfig

Name Type Description Required
apiKey string API key from Shopify Partner Dashboard Yes
shopOrigin string The hostname for the current shop. Learn more Yes
forceRedirect boolean Use to toggle redirecting to Shopify Admin when the app is not opened inside the Shopify Admin. Defaults to true.

On this page