TypeScript icon, indicating that this package has built-in type declarations

3.7.9 • Public • Published


Join our team and work on libraries like this one.

License: MIT npm version npm bundle size (minified + gzip)

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 * as TitleBar from '@shopify/app-bridge/actions/TitleBar';

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/client';
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 />

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

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

Migrating from 2.x.x to 3.0.0

There are two breaking API changes in version 3.0.0.

  • useContextualSaveBar
  • useToast


In version 2.x.x, useContextualSaveBar was called with all of its options. It then created the contextual save bar and dispatched show and hide functions as an internal side effect based on the visible prop and any changes in options. It did not return anything.

Example code


In version 3.0.0, useContextualSaveBar becomes more declarative. The hook is called without any props and it returns several objects and methods that can be used to update contextual save bar options, as well as to show and hide the component.

Example code

const {show, hide, saveAction, discardAction} = useContextualSaveBar();
const fullWidth = true;
const leaveConfirmationDisabled = false;

  onClick={() => {
    show(fullWidth, leaveConfirmationDisabled);
    discardAction.setOptions({onAction: () => console.log('On discard')});
    saveAction.setOptions({onAction: () => console.log('On save')});
  Show ContextualSaveBar
<Button onClick={hide}>Hide ContextualSaveBar</Button>

See useContextualSaveBar docs for more details.


In version 2.x.x, useToast returns a show method that accepts one prop - an object with the following properties:

  • content
  • duration
  • isError
  • onDismiss

All the props except content are optional.

Example code

const {show} = useToast

  content: 'Success!,
  duration: 2000,
  isError: false,
  onDismiss: () => console.log('Dismissed'),

In version 3.0.0, the content moves to a top-level prop and the remaining properties are passed in as an optional options prop (all properties in the options object remain optional). `

Example code

const {show} = useToast;

show('Success!', {
  duration: 2000,
  isError: false,
  onDismiss: () => console.log('Dismissed'),

See useToast docs for more details.

Legacy support

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.




Package Sidebar


npm i @shopify/app-bridge-react

Weekly Downloads






Unpacked Size

323 kB

Total Files


Last publish


  • jaimie.rockburn
  • blittle
  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • wcandillon
  • jplhomer
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • vividviolet
  • bpscott