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

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`.

Using App Bridge React with Polaris

App Bridge React is fully compatible with Polaris. To use them together, wrap your app in both Polaris’s <AppProvider> component and App Bridge React’s <Provider> component.

Pass the config object containing the apiKey and shopOrigin values to the App Bridge React <Provider> config prop. Don't pass the apiKey or shopOrigin values to the Polaris <AppProvider> component.

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

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

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 four ways to use the context API: useAppBridge, useContext, Context.Consumer, and Class.contextType.

The useAppBridge hook is available in version 1.25.0 and above. You can use the useAppBridge hook to quickly access the App Bridge client app in a functional component.

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

function MyFunctionalComponent() {
  const app = useAppBridge();

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

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

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

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

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

If you are using a version of App Bridge below 1.25.0 where the useAppBridge hook is not available, use React’s context API directly:

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

function MyFunctionalComponent() {
  const app = useContext(Context);
  if (app) {
    // Do something with App Bridge `app` instance...
    app.getState().then(state => console.log(state));
  }

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

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

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

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

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

import React from 'react';
import {Provider, 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);

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

import React from 'react';
import {Provider, 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);