@shopify/app-bridge-react
Advanced tools
Shopify App Bridge offers React component wrappers and hooks for App Bridge features.
Read The Docs
Join our team and work on libraries like this one!
Run the following command using npm:
npm install --save @shopify/app-bridge-react
If you prefer Yarn, use the following command instead:
yarn add @shopify/app-bridge-react
app-bridge.js script tag in your app. Replace %SHOPIFY_API_KEY% with your app's client ID. 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.
<head>
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>
peerDependencies listings for react and react-dom. Ensure you're using version 18.0.0 or higher of both packages.For information on how to migrate from Shopify App Bridge React 3.x.x, see the migration guide.
App Bridge React provides a few component wrappers for the custom elements available in App Bridge, such as Modal, NavMenu, and TitleBar.
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>
</>
);
}
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 or retrieving app configuration details. See the documentation for more information on what is available through the shopify variable.
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>;
}
Please file an issue for bugs, missing documentation, or unexpected behaviour using this template.
Please file an issue to suggest new features using this template.
For questions related to using the library, please visit the Shopify Partner Slack linked in the Resources page of your Shopify Partner Dashboard.
FAQs
React wrappers for the Shopify App Bridge library
The npm package @shopify/app-bridge-react receives a total of 45,292 weekly downloads. As such, @shopify/app-bridge-react popularity was classified as popular.
We found that @shopify/app-bridge-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.