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

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.

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