Shopify · andrewiggins · Apr 2, 2026 · Feb 20, 2026
diff --git a/packages/app-bridge-react/.eslintrc.json b/packages/app-bridge-react/.eslintrc.json
@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "plugin:@shopify/typescript",
+    "plugin:@shopify/jest",
+    "plugin:@shopify/node",
+    "plugin:@shopify/prettier"
+  ],
+  "plugins": ["react-hooks"],
+  "rules": {
+    "@typescript-eslint/consistent-indexed-object-style": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "consistent-return": "off",
+    "func-name-matching": "off",
+    "no-console": "off",
+    "no-catch-shadow": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
+}
diff --git a/packages/app-bridge-react/CHANGELOG.md b/packages/app-bridge-react/CHANGELOG.md
@@ -0,0 +1,181 @@
+# Changelog
+
+## 4.2.10
+
+### Patch Changes
+
+- Updated dependencies [`9f8ecdb615732364fbdb1c010f385e58b4b5525d`]:
+  - @shopify/app-bridge-types@0.7.0
+
+## 4.2.9
+
+### Patch Changes
+
+- Updated dependencies [`e6a8c26486ab44faa524d8041bbdcb3bbb6b1515`]:
+  - @shopify/app-bridge-types@0.6.0
+
+## 4.2.8
+
+### Patch Changes
+
+- #882 `c69c5196a0442c5e656b691ef00166dec4145b72` Thanks [@Fionoble](https://github.com/Fionoble)! - Force patch
+
+## 4.2.7
+
+### Patch Changes
+
+- Updated dependencies [`196fc00a83f058c00a07ff0393cf7c82fd0e8537`]:
+  - @shopify/app-bridge-types@0.5.3
+
+## 4.2.6
+
+### Patch Changes
+
+- Updated dependencies [`e41a88088b48ed9fa5f83a286a07d423b21d59f7`]:
+  - @shopify/app-bridge-types@0.5.2
+
+## 4.2.5
+
+### Patch Changes
+
+- Updated dependencies [`dd9205fceb4f2a7e8cfe8e161dd1d80537fd2747`]:
+  - @shopify/app-bridge-types@0.5.1
+
+## 4.2.4
+
+### Patch Changes
+
+- Updated dependencies [`e8e0b29249891fd59e7a709b8c6990fa5ae6908b`]:
+  - @shopify/app-bridge-types@0.5.0
+
+## 4.2.3
+
+### Patch Changes
+
+- Updated dependencies [`4f7742e4aacb581a380c76742689dca617c86b6d`]:
+  - @shopify/app-bridge-types@0.4.0
+
+## 4.2.2
+
+### Patch Changes
+
+- Updated dependencies [`ad18a376e0e7a4e3921fa8f394d424644eb1f7bc`]:
+  - @shopify/app-bridge-types@0.3.0
+
+## 4.2.1
+
+### Patch Changes
+
+- Updated dependencies [`6334cc4f89f8c22c871dfb122f8d5aba358b26a3`]:
+  - @shopify/app-bridge-types@0.2.0
+
+## 4.2.0
+
+### Minor Changes
+
+- #518 `bc1af9034c8cca66ebd7a44474aa7a11de7013e9` Thanks [@SammyJoeOsborne](https://github.com/SammyJoeOsborne)! - Adding types for reviews plugin api.
+
+### Patch Changes
+
+- Updated dependencies [`bc1af9034c8cca66ebd7a44474aa7a11de7013e9`]:
+  - @shopify/app-bridge-types@0.1.0
+
+## 4.1.10
+
+### Patch Changes
+
+- #392 `f5e596d9dba93eb0f846ef4a1cac8ab670a3efc3` Thanks [@henrytao-me](https://github.com/henrytao-me)! - Remove node version in package.json for app-bridge-react
+
+## 4.1.9
+
+### Patch Changes
+
+- #383 `699da8fa064a60883caea326804b0a5b309e5c00` Thanks [@henrytao-me](https://github.com/henrytao-me)! - Fix build tools for app-bridge-react and all extensibility packages to support both ESM and CommonJS build output
+
+## 4.1.8
+
+### Patch Changes
+
+- #325 `dfac2e4a775102b81488155dc4b00c8132988a22` Thanks [@elanalynn](https://github.com/elanalynn)! - Expose ResourcePicker and Toast types
+
+- Updated dependencies [`dfac2e4a775102b81488155dc4b00c8132988a22`]:
+  - @shopify/app-bridge-types@0.0.18
+
+## 4.1.7
+
+### Patch Changes
+
+- Updated dependencies [`d3d0b4e41a0c2538b7c2f1f57ed22765c629241f`]:
+  - @shopify/app-bridge-types@0.0.17
+
+## 4.1.6
+
+### Patch Changes
+
+- Updated dependencies [`934d5c06c26f5b822a72be983c219c9f65fabcf2`]:
+  - @shopify/app-bridge-types@0.0.16
+
+## 4.1.5
+
+### Patch Changes
+
+- #34 `617f7c7412bed204f9a757ad11cad8635820e4dc` Thanks [@charlesdobson](https://github.com/charlesdobson)! - fix build output due to misconfigured build script
+
+- Updated dependencies [`617f7c7412bed204f9a757ad11cad8635820e4dc`]:
+  - @shopify/app-bridge-types@0.0.15
+
+## 4.1.4
+
+### Patch Changes
+
+- Updated dependencies [`a79a42172c1af3412ed40213f89e694ac8ada6dd`]:
+  - @shopify/app-bridge-types@0.0.14
+
+## 4.1.3
+
+### Patch Changes
+
+- #76 `bb530e3` Thanks [@henrytao-me](https://github.com/henrytao-me)! - Fix leave confirmation for saveBar
+
+## 4.1.2
+
+### Patch Changes
+
+- #69 `153c3dd` Thanks [@henrytao-me](https://github.com/henrytao-me)! - Bump app-brige-types
+
+## 4.1.1
+
+### Patch Changes
+
+- #66 `1678fe8` Thanks [@charlesdobson](https://github.com/charlesdobson)! - expose CHANGELOG.md
+
+## 4.1.0
+
+### Minor Changes
+
+- #62 `8541115` Thanks [@henrytao-me](https://github.com/henrytao-me)! - add src prop to Modal component to support iframe modals
+
+- #64 `b1fbf2b` Thanks [@henrytao-me](https://github.com/henrytao-me)! - add SaveBar component to declaratively control the contextual save bar
+
+## 4.0.0
+
+See the [migration guide](https://shopify.dev/docs/api/app-bridge/migration-guide) for more details on how to migrate your app.
+
+### Major Changes
+
+- Added requirement to add the `app-bridge.js` script tag in your app
+- Added requirement to use `react` and `react-dom` 18 or higher
+- Refactored `Modal` component to accept custom DOM content instead of `src` and `message` props
+- Refactored `NavigationMenu` component (renamed `NavMenu`) to accept `<a>` elements as children instead of `navigationLinks` and `matcher` props
+- Refactored `TitleBar` component to accept `<a>`, `<button>`, and `<section>` elements as children instead of primaryAction, secondaryActions, actionGroups, and breadcrumbs props
+- Removed `ContextualSaveBar` component in favour of it being [automatically configured through `form` elements](https://shopify.dev/docs/api/app-bridge-library/apis/contextual-save-bar)
+- Removed `Loading` component in favour of the [`shopify.loading` API](https://shopify.dev/docs/api/app-bridge-library/apis/loading)
+- Removed `ResourcePicker` component in favour of the [`shopify.resourcePicker` API](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker)
+- Removed `Toast` component in favour of the [`shopify.toast` API](https://shopify.dev/docs/api/app-bridge-library/apis/toast)
+- Refactored `useAppBridge` hook to access the `shopify` global variable instead of the `app` instance
+- Removed `useAppBridgeState` hook in favour of the [`shopify.user` API](https://shopify.dev/docs/api/app-bridge-library/apis/user) and others
+- Removed `useAuthenticatedFetch` hook as the `app-bridge.js` script injects automatic authorization into the global `fetch` function
+- Removed `useContextualSaveBar` hook in favour of it being [automatically configured through `form` elements](https://shopify.dev/docs/api/app-bridge-library/apis/contextual-save-bar)
+- Removed `useNavigate` hook in favour of the [browser Navigation API](https://shopify.dev/docs/api/app-bridge-library/apis/navigation)
+- Removed `useNavigationHistory` hook in favour of the [browser History API](https://shopify.dev/docs/api/app-bridge-library/apis/navigation)
+- Removed `useToast` hook in favour of the [`shopify.toast` API](https://shopify.dev/docs/api/app-bridge-library/apis/toast)
diff --git a/packages/app-bridge-react/LICENSE.md b/packages/app-bridge-react/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2024-present, Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/app-bridge-react/README.md b/packages/app-bridge-react/README.md
@@ -0,0 +1,147 @@
+<div align="center">
+<h1>App Bridge React</h1>
+
+<p>Shopify App Bridge offers React component wrappers and hooks for App Bridge features.</p>
+
+<br />
+
+[**Read The Docs**](https://shopify.dev/docs/api/app-bridge-library)
+<br/><br/>
+**[Join our team and work on libraries like this one!](https://www.shopify.ca/careers)**
+
+</div>
+
+<hr />
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md)
+![npm](https://img.shields.io/npm/v/@shopify/app-bridge-react.svg)
+[![NPM Downloads](https://img.shields.io/npm/dm/@shopify/app-bridge-react)](https://npmtrends.com/@shopify/app-bridge-react)
+[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/app-bridge-react.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/app-bridge-react.svg)
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Configuration](#configuration)
+- [Migration](#migration-from-previous-versions)
+- [Usage](#usage)
+  - [Components](#components)
+  - [Hooks](#hooks)
+- [Issues](#issues)
+  - [🐛 Bugs](#🐛-bugs)
+  - [💡 Feature Requests](#💡-feature-requests)
+  - [❓ Questions](#❓-questions)
+- [License](#license)
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install --save @shopify/app-bridge-react
+```
+
+If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:
+
+```bash
+yarn add @shopify/app-bridge-react
+```
+
+If you prefer [pnpm](https://pnpm.io/), use the following command instead:
+
+```bash
+pnpm add @shopify/app-bridge-react
+```
+
+## Configuration
+
+1. Include the `app-bridge.js` script tag in your app. Replace `%SHOPIFY_API_KEY%` with your app's [client ID](https://shopify.dev/docs/apps/auth/client-secret#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.
+
+```html
+<head>
+  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
+  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
+</head>
+```
+
+2. This library has `peerDependencies` listings for [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom). Ensure you're using version `18.0.0` or higher of both packages.
+
+## Migration from previous versions
+
+For information on how to migrate from Shopify App Bridge React 3.x.x, see the [migration guide](https://shopify.dev/docs/api/app-bridge/migration-guide).
+
+## Usage
+
+### Components
+
+App Bridge React provides a few component wrappers for the custom elements available in App Bridge, such as [Modal](https://shopify.dev/docs/api/app-bridge-library/react-components/modal), [NavMenu](https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu), and [TitleBar](https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar).
+
+```jsx
+import {Modal, TitleBar, useAppBridge} from '@shopify/app-bridge-react';
+
+function SocialMediaModal() {
+  const shopify = useAppBridge();
+
+  function handlePrimaryAction() {
+    // Perform actions when the primary button is clicked
+    shopify.modal.show('social-media-modal');
+  }
+
+  return (
+    <>
+      <button onClick={() => modalRef.current?.show()}>
+        Expand Your Reach
+      </button>
+      <Modal id="social-media-modal" variant="small">
+        <p style={{padding: '1rem'}}>
+          Expand your reach and attract more customers by enabling easy social
+          media sharing of your products.
+        </p>
+        <TitleBar title="Drive traffic with social media sharing">
+          <button variant="primary" onClick={handlePrimaryAction}>
+            Enable Social Sharing
+          </button>
+        </TitleBar>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Hooks
+
+App Bridge React provides the `useAppBridge` hook to make accessing the `shopify` global variable simple and helpful when used in a server-side rendered app. This variable exposes various App Bridge functionalities, such as [displaying toast notifications](https://shopify.dev/docs/api/app-bridge-library/apis/toast) or [retrieving app configuration details](https://shopify.dev/docs/api/app-bridge-library/apis/config). See the [documentation](https://shopify.dev/docs/api/app-bridge-library#shopify-global-variable) for more information on what is available through the `shopify` variable.
+
+```jsx
+import {useAppBridge} from '@shopify/app-bridge-react';
+
+function GenerateBlogPostButton() {
+  const shopify = useAppBridge();
+
+  function generateBlogPost() {
+    // Handle generating
+    shopify.toast.show('Blog post template generated');
+  }
+
+  return <button onClick={generateBlogPost}>Generate Blog Post</button>;
+}
+```
+
+## Issues
+
+### 🐛 Bugs
+
+Please file an issue for bugs, missing documentation, or unexpected behaviour using [this template](https://github.com/Shopify/shopify-app-bridge/issues/new?assignees=&labels=bug&projects=&template=bug_report.md).
+
+### 💡 Feature Requests
+
+Please file an issue to suggest new features using [this template](https://github.com/Shopify/shopify-app-bridge/issues/new?assignees=&labels=feature&projects=&template=feature_request.md).
+
+### ❓ Questions
+
+For questions related to using the library, please visit the Shopify Partner Slack linked in the Resources page of your Shopify Partner Dashboard.
+
+## License
+
+[MIT](./LICENSE.md)