@shopify/app-bridge-react

v4.1.3

Published

9 days ago

React wrappers for the Shopify App Bridge library

Downloads

241,486

Read The Docs Join our team and work on libraries like this one!

npm

Installation

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

Configuration

Include the 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>

This library has peerDependencies listings for react and 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.

Usage

Components

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>
    </>
  );
}

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

Issues

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behaviour using this template.

💡 Feature Requests

Please file an issue to suggest new features using this template.

❓ 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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents