@shopify/app-bridge-react

Shopify is doubling our engineering staff in 2021! Join our team and work on libraries like this one.

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

Instead of using App Bridge actions directly:

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

const app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  host: 'host from URL search parameter',
});

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

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

Use the React component wrappers:

Note: only one Provider is needed for your application.

// MyApp.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from '@shopify/app-bridge-react';
import {RedirectButton} from './RedirectButton';

function MyApp() {
  const config = {
    apiKey: 'API key from Shopify Partner Dashboard',
    host: 'host from URL search parameter',
  };

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

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

To access an app from the Provider, use the useAppBridge hook (since v1.25.0):

// RedirectButton.jsx
import {Button, Redirect} from '@shopify/app-bridge/actions';
import {useAppBridge} from '@shopify/app-bridge-react';

function RedirectButton() {
  const app = useAppBridge();
  const redirect = Redirect.create(app);

  const handleClick = () => {
    // Go to {shopUrl}/admin/customers with newContext
    redirect.dispatch(Redirect.Action.ADMIN_PATH, {
      path: '/customers',
      newContext: true,
    });
  };

  return <Button onClick={handleClick}>Activate Lasers for Customers</Button>;
}

If you are using App Bridge v1.24.0 and below, or your project does not support React hooks, alternative methods on how to access app can be found in the Provider docs.

See Shopify Developers for full documentation.