If you have an app that uses components and hooks from Shopify App Bridge React 3.x.x, then you can follow this guide to upgrade your components and hooks to the latest version.

## Requirements

- [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) version 18 or higher
- A Node.js package manager: either [npm](https://www.npmjs.com/get-npm), [Yarn 1.x](https://classic.yarnpkg.com/lang/en/docs/install), or [pnpm](https://pnpm.io/installation)

## Benefits of migration

When you migrate your app to use Shopify App Bridge React 4.x.x, you can take advantage of the following improvements to the developer experience:

### Simplified configuration

Shopify App Bridge React 4.x.x simplifies the configuration process. Apps no longer need to use a React Provider or the `host` config. Instead, they only need to provide their API key to the `app-bridge.js` script.

### Automatic updates

The `app-bridge.js` script automatically keeps itself up to date, so you can access new Shopify App Bridge APIs as soon as they're released.

### Use web standards

The latest version of Shopify App Bridge embraces the web platform and web standards, so you can use web APIs you're already familiar with. For more information about the motivation behind App Bridge, refer to [Shopify's platform is the Web platform](https://shopify.engineering/shopifys-platform-is-the-web-platform).

### Direct API access

Take advantage of the new Direct API access feature. You can make requests to the Admin API directly from your app using the standard [web fetch API](https://developer.mozilla.org/en-US/docs/Web/API/fetch). For more information about Direct API access, refer to the [documentation](/docs/api/app-bridge-library#direct-api-access).

### Modals with custom content

Add modals to your app with custom content using the new Modal component from Shopify App Bridge React. This enables you to create rich modal experiences that render directly in the Shopify admin without having to handle separate routes. These modals are fast too, because they're preloaded.

## Step 1: Add the `app-bridge.js` script tag

Include the `app-bridge.js` script tag in your app. Replace `%SHOPIFY_API_KEY%` with your app's [client ID](/docs/apps/build/authentication-authorization/client-secrets#retrieve-your-apps-client-credentials). This configures your app to use Shopify App Bridge.

The `app-bridge.js` script is CDN-hosted, so your app always gets the latest version of it.

<p>
  <div class="react-code-block" data-preset="file">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar "></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="filename" data-value="index.html"></script>

  <script type="text/plain" data-language="html">
  RAW_MD_CONTENT<head>
    <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
    <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js">&lt;/script&gt;
  </head>
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


## Step 2: Upgrade your `@shopify/app-bridge-react` dependency

Install or upgrade the `@shopify/app-bridge-react` dependency with your package manager.

<p>
  <div class="react-code-block" data-preset="terminal">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar "></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>


  <script type="text/plain" data-language="bash" data-title="npm">
  RAW_MD_CONTENT  npm install @shopify/app-bridge-react@latest
  END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="bash" data-title="Yarn">
  RAW_MD_CONTENT  yarn add @shopify/app-bridge-react@latest
  END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="bash" data-title="pnpm">
  RAW_MD_CONTENT  pnpm add @shopify/app-bridge-react@latest
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


## Step 3: Remove the `Provider` setup

In previous versions of App Bridge React, you needed to set up a [context provider](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider) to enable component and hook usage. This is no longer needed, as all the setup for Shopify App Bridge is done through the `app-bridge.js` script tag that you added in [step 1](/docs/api/app-bridge/migration-guide#step-1-add-the-app-bridge-js-script-tag).

Remove all `Provider` import statements and usages from `@shopify/app-bridge-react` in your app:

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="Provider setup"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENTimport ReactDOM from 'react-dom';
  import {Provider} from '@shopify/app-bridge-react';
  function MyApp() {
    return (
      <Provider config={config}>
        <div>My app</div>
      </Provider>
    );
  }
  const root = document.createElement('div');
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<MyApp />);
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENTimport ReactDOM from 'react-dom';
  function MyApp() {
    return (
      <div>My app</div>
    );
  }
  const root = document.createElement('div');
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<MyApp />);
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


## Step 4: Update components

The following components and props have been refactored, renamed, or removed. Review and update the following components as described:

- [Modal](#modal)
  - Updated props:
      - [`size`](#size-prop-renamed-to-variant)
      - [`message`](#message-prop-removed)
      - [`title`](#title-prop-removed)
      - [`onClose`](#onclose-prop-renamed-onhide)
      - [`primaryAction` and `secondaryActions` props](#primaryaction-and-secondaryactions-props-removed)
  - [`setupModalAutoSizing` utility](#setupmodalautosizing-utility)
  - [Communication with the parent page](#communication-with-the-parent-page)
- [TitleBar](#titlebar)
  - Updated props:
      - [`primaryAction`, `secondaryActions`, and `actionGroups`](#primaryaction-secondaryactions-and-actiongroups-props-removed)
      - [`breadcrumbs`](#breadcrumbs-prop-removed)
- [NavigationMenu](#navigationmenu-renamed-navmenu)

### Modal

The [`Modal`](/docs/api/app-bridge-library/react-components/modal) component allows you to display an overlay that prevents interaction with the rest of the app until dismissed. The following updates have been made to the `Modal` component's behaviour and props.

#### `size` prop renamed to `variant`

The `size` prop has been renamed [`variant`](/docs/api/app-bridge-library/react-components/modal#modalcomponent-propertydetail-variant) to more accurately describe it's purpose. The `variant` prop accepts plain strings rather than constants.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="size > variant"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT<Modal size={Modal.Size.Large} />
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT<Modal variant='large'></Modal>
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


> Note
> The `Modal` component has a new variant called `max`. Refer to the [`max` modal example](/docs/api/app-bridge-library/react-components/modal#modals-with-different-options-opening-a-max-size-modal) for more details.

#### `message` prop removed

The `Modal` component no longer accepts a `message` prop. Instead, it now accepts React elements as children.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="message prop removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT<Modal message="Hello world!" />
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT<Modal>
    <p>Hello world!</p>
  </Modal>
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


#### `title` prop removed

The `Modal` component no longer accepts a `title` prop, Instead, now uses the [`TitleBar`](/docs/api/app-bridge-library/react-components/titlebar) component to control the modal title.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="title prop removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT<Modal title="My modal" />
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT<Modal>
    <TitleBar title="My modal" />
  </Modal>
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


#### `onClose` prop renamed `onHide`

The `onClose` prop has been renamed to `onHide` in the new `Modal` component to standardize the props with the [admin extensions components](/docs/api/admin-extensions/2024-01/components) library.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="onClose > onHide"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT<Modal onClose={handleClose} />
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT<Modal onHide={handleClose}></Modal>
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


#### `primaryAction` and `secondaryActions` props removed

The `Modal` component no longer accepts the `primaryAction` and `secondaryActions` props. It now uses the [`TitleBar`](/docs/api/app-bridge-library/react-components/titlebar) component to control the modal action buttons.

A `TitleBar` component in a `Modal` component accepts only one secondary action.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="primaryAction and secondaryActions props removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  <Modal
    primaryAction={{
      content: 'Add Instagram',
      onAction: handleChange
    }}
    secondaryActions={[
      {
        content: 'Learn more',
        onAction: handleChange,
      },
    ]}
  />
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  <Modal>
    <TitleBar>
      <button variant='primary' onClick={handleChange}>Add Instagram</button>
      <button onClick={handleChange}>Learn more</button>
    </TitleBar>
  </Modal>
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


#### `setupModalAutoSizing` utility

In previous versions, you needed to set up [modal auto-sizing](/docs/api/app-bridge/previous-versions/actions/modal#set-modal-size-automatically) to allow your modal to update its height to fit the page content. This is no longer needed, because auto-sizing is set automatically.

#### Communication with the parent page

In previous versions, you needed to use the [`Modal.Action.DATA` action](/docs/api/app-bridge/previous-versions/actions/modal#communicate-with-the-parent-page) to communicate between the parent page and the modal. There are now two ways to communicate between the modal and the parent page.

If you're using a modal with custom content, you can use the [Broadcast Channel Web API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API) to communicate with the parent page.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="Communication with the parent page"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  function MyModal() {
    return (
      <Modal title='Hello world!' src="/modal-route" />
    )
  }
  
  // component rendered at /modal-route
  function ModalRouteComponent() {
    const app = useAppBridge();
  
    const sendMessageToApp = () => {
      app.dispatch(Modal.data({message: 'Hi, this is the modal!'}));
    }
  
    return (
      <div>
        <button onClick={sendMessageToApp}>Send message</button>
      </div>
    )
  }
  
  function MyApp() {
    const app = useAppBridge();
  
    useEffect(() => {
      app.subscribe(Modal.Action.DATA, (data) => {
        console.log('Received message from modal: ', data.message);
      });
    }, []);
  
    return (
      <div>My app</div>
    )
  }
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  const modalChannel = new BroadcastChannel('my-modal');
  
  function MyModal() {
    const sendMessageToApp = () => {
      modalChannel.postMessage('Hi, this is the modal!');
    }
  
    return (
      <Modal>
        <button onClick={sendMessageToApp}>Send message</button>
      </Modal>
    )
  }
  
  function MyApp() {
    useEffect(() => {
      modalChannel.addEventListener('message', (event) => {
        console.log('Received message from modal: ', event);
      });
    }, []);
  
    return (
      <div>My app</div>
    )
  }
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


If you're using a modal with a `src` prop, you can use the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) to communicate with the parent page. You can access `postMessage` through the `window.opener` object in the modal and through the `modal.contentWindow` object in the parent page.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="Communication with the parent page"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  function MyModal() {
    return (
      <Modal title='Hello world!' src="/modal-route" />
    )
  }
  
  // component rendered at /modal-route
  function ModalRouteComponent() {
    const app = useAppBridge();
  
    const sendMessageToApp = () => {
      app.dispatch(Modal.data({message: 'Hi, this is the modal!'}));
    }
  
    return (
      <div>
        <button onClick={sendMessageToApp}>Send message</button>
      </div>
    )
  }
  
  function MyApp() {
    const app = useAppBridge();
  
    useEffect(() => {
      app.subscribe(Modal.Action.DATA, (data) => {
        console.log('Received message from modal: ', data.message);
      });
    }, []);
  
    return (
      <div>My app</div>
    )
  }
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  function MyModal() {
    return (
      <Modal id="my-modal" src="/modal-route">
        <TitleBar title="Hello world!" />
      </Modal>
    )
  }
  
  // component rendered at /modal-route
  function ModalRouteComponent() {
    const app = useAppBridge();
  
    useEffect(() => {
      function handleMessageFromMainApp(ev) {
        console.log('Message received in modal:', ev.data);
      }
  
      window.addEventListener('message', handleMessageFromMainApp)
      return () => {
        window.removeEventListener('message', handleMessageFromMainApp)
      }
    }, [])
  
    const sendMessageToApp = () => {
      window.opener.postMessage('Hi, this is the modal!', location.origin);
    }
  
    return (
      <div>
        <button onClick={sendMessageToApp}>Send message</button>
      </div>
    )
  }
  
  function MyApp() {
    const app = useAppBridge();
  
    useEffect(() => {
      function handleMessageFromModal(ev) {
        console.log('Message received in main app:', ev.data);
      }
  
      window.addEventListener('message', handleMessageFromModal)
      return () => {
        window.removeEventListener('message', handleMessageFromModal)
      }
    }, [])
  
    const sendMessageToApp = () => {
      const modal = document.getElementById('my-modal');
      modal.contentWindow.postMessage('Hi, this is the main app!', location.origin);
    }
  
    return (
      <div>My app</div>
    )
  }
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>



### TitleBar

The [`TitleBar`](/docs/api/app-bridge-library/react-components/titlebar) component allows you to populate a standardized title bar with button actions and navigation breadcrumbs. It can now also be used inside a `Modal` component to control the title and footer content to reduce the number of APIs that you need to learn. The following updates have been made to the title bar component's behaviour and props.

#### `primaryAction`, `secondaryActions`, and `actionGroups` props removed

The `TitleBar` component no longer accepts the `primaryAction`, `secondaryActions`, and `actionGroups` props. Instead, to provide title bar actions, add `button` elements as children.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="primaryAction, secondaryActions, and actionGroups props removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  <TitleBar
    title='Hello world!'
    primaryAction={{
      content: 'Foo',
      onAction: handleFooClick
    }}
    secondaryActions={[
      {
        content: 'Bar',
        onAction: handleBarClick,
        loading: true,
      },
    ]}
    actionGroups={[
      {
        title: 'More actions',
        actions: [
          {
            content: 'First grouped button',
            onAction: handleFirstGroupedButtonClick,
          },
          {
            content: 'Second grouped button',
            onAction: handleSecondGroupedButtonClick,
            disabled: true,
          }
        ]
      }
    ]}
  />
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  <TitleBar title='Hello world!'>
    <button variant='primary' onClick={handleFooClick}>Foo</button>
    <button onClick={handleBarClick}>Bar</button>
    <section label='More actions'>
      <button onClick={handleFirstGroupedButtonClick}>First grouped button</button>
      <button onClick={handleSecondGroupedButtonClick} disabled>Second grouped button</button>
    </section>
  </TitleBar>
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


#### `breadcrumbs` prop removed

The `TitleBar` component no longer accepts the `breadcrumbs` prop. Instead, a breadcrumb can be added to the title bar using a child `a` or `button` element with the `variant="breadcrumb"` attribute set.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="breadcrumbs prop removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  <TitleBar
    title='Hello world!'
    breadcrumbs={[
      {
        content: 'Breadcrumb',
        url: '/breadcrumb',
      }
    ]}
  />
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  <TitleBar title='Hello world!'>
    <a variant='breadcrumb' href='/breadcrumb'>Breadcrumb</a>
  </TitleBar>
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


### NavigationMenu renamed NavMenu

The [`NavMenu`](/docs/api/app-bridge-library/react-components/navmenu) component creates a navigation menu for your app. This component was called `NavigationMenu` in previous versions of Shopify App Bridge. It was renamed to `NavMenu` to more closely match the [HTML `nav` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav). The following updates have been made to the navigation menu component's behaviour and props.

#### `navigationLinks` and `matcher` props removed

The navigation menu component no longer accepts the `navigationLinks` and `matcher` props. Instead, to provide menu links, add `a` elements as children of the `NavMenu` component. The active link is automatically matched.

The first element of the `NavMenu` component is required and used to configure the home route of the app. It is not rendered as a link. It needs to have `rel="home"` set along with the `href` set to the root path of your app.

<p>
  <div class="react-stacked-code-block ThemeMode-dim" data-preset="stacked">
  <script data-option="title" data-value="navigationLinks and matcher props removed"></script>

  
  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="3.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="3.x.x">
  RAW_MD_CONTENT
  
  <NavigationMenu
    navigationLinks={[
      {
        label: 'Home',
        destination: '/',
      },
      {
        label: 'Templates',
        destination: '/templates',
      },
      {
        label: 'Settings',
        destination: '/settings',
      },
    ]}
    matcher={(link, location) => link.destination === location.pathname}
  />
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  <p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>

  <script data-option="title" data-value="4.x.x"></script>

  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  <NavMenu>
    <a href="/" rel="home">Home</a>
    <a href="/templates">Templates</a>
    <a href="/settings">Settings</a>
  </NavMenu>
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


  </div>
  </p>


### Other components

All other React components from previous versions have been removed, and replaced by new APIs provided through the [`shopify` global variable](/docs/api/app-bridge-library#shopify-global-variable). Refer to the following table to learn about the API replacement for each component:

| Component | New API |
|---|---|---|
| `ContextualSaveBar` | [Contextual Save Bar API](/docs/api/app-bridge-library/apis/contextual-save-bar) |
| `Loading` | [Loading API](/docs/api/app-bridge-library/apis/loading) |
| `unstable_Picker` | [Picker API](/docs/api/app-bridge-library/apis/picker) |
| `ResourcePicker` | [ResourcePicker API](/docs/api/app-bridge-library/apis/resource-picker) |
| `Toast` | [Toast API](/docs/api/app-bridge-library/apis/toast) |

## Step 5: Update hooks

The following hooks have been refactored, renamed, or removed. Review and update the following components as described:

### `useAppBridge` hook

The [`useAppBridge`](/docs/api/app-bridge-library/react-hooks/useappbridge) hook included in the most recent version of Shopify App Bridge functions differently than the previous `useAppBridge` hook. Instead of returning the App Bridge `app` instance, it returns the `shopify` global variable, which is used to access App Bridge APIs such as `toast` and `resourcePicker`. As the `shopify` variable is only available in a browser context, the `useAppBridge` hook throws helpful error messages when used in a server context or in a misconfigured app.

You no longer need to use the `app` reference returned from old uses of the `useAppBridge` hook as App Bridge handles configuration for you.

<p>
  <div class="react-code-block" data-preset="basic">
  <div class="react-code-block-preload ThemeMode-dim">
  <div class="react-code-block-preload-bar basic-codeblock"></div>
  <div class="react-code-block-preload-placeholder-container">
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>
  <div class="react-code-block-preload-code-container">
  <div class="react-code-block-preload-codeline-number"></div>
  <div class="react-code-block-preload-codeline"></div>
  </div>

  </div>
  </div>


  <script type="text/plain" data-language="jsx" data-title="4.x.x">
  RAW_MD_CONTENT
  
  function GenerateBlogPostButton() {
    const shopify = useAppBridge();
  
    function generateBlogPost() {
      // Handle generating
      shopify.toast.show('Blog post template generated');
    }
  
    return <button onClick={generateBlogPost}>Generate Blog Post</button>;
  }
  
  
  END_RAW_MD_CONTENT</script>

  </div>
  </p>


### Other hooks

All other React hooks from previous versions have been removed, and replaced by new APIs provided through the [`shopify` global variable](/docs/api/app-bridge-library#shopify-global-variable). In most cases, you can use the `useAppBridge` hook in place of these hooks, and access the corresponding API through the returned `shopify` global variable.

Refer to the following table to learn about the API replacement for each hook:

| Hook | Replacement |
|---|---|
| `useAppBridgeState` | This functionality has been spread out across a few APIs. For example, to retrieve the current `staffMember`, use the [User API](/docs/api/app-bridge-library/apis/user).  |
| `useAuthenticatedFetch` | This hook is no longer needed, because App Bridge injects automatic authorization into the global `fetch` function. For more information, refer to [Resource Fetching](/docs/api/app-bridge-library/apis/resource-fetching). |
| `useContextualSaveBar` | The contextual save bar is now automatically configured when you provide the `data-save-bar` attribute to a [form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). For more information, refer to [Contextual Save Bar](/docs/api/app-bridge-library/apis/contextual-save-bar). |
| `useNavigate` | [Navigation API](/docs/api/app-bridge-library/apis/navigation) |
| `useNavigationHistory` | [Navigation API](/docs/api/app-bridge-library/apis/navigation) |
| `useToast` | [Toast API](/docs/api/app-bridge-library/apis/toast) |