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.

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

Getting started

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

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

Using App Bridge React 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.

See the <Provider> component for more information.