React components

Shopify App Bridge offers React component wrappers for some actions. This is a great option if you are already using React and want to follow familiar patterns.

Like App Bridge itself, the App Bridge React component library is available as a JavaScript module on npm.

Getting started

Instead of using App Bridge actions directly:

import createApp from '@shopify/app-bridge';
import {TitleBar} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const titleBarOptions = {
  title: 'My page title',
};

const myTitleBar = TitleBar.create(app, titleBarOptions);

Use the React component wrappers:

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

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

  return (
    <Provider config={config}>
      <TitleBar title="My page title"/>
    </Provider>
  );
}

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

Using App Bridge with Polaris

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

Do not pass apiKey or shopOrigin to Polaris’s <AppProvider>. Instead, pass the config prop to App Bridge React’s <Provider>.

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

You can access the App Bridge client app using the React Context API, as in Polaris. See the <Provider> component for more information.

On this page