useAppBridge

Requires @shopify/app-bridge-react@v4 and the app-bridge.js script tag

The useAppBridge hook returns the shopify global variable to use App Bridge APIs such as toast and resourcePicker.

Anchor to Use casesUse cases

React integration: Access the shopify global in React components to use App Bridge APIs like toast and resource picker.
Server rendering: Safely access App Bridge during server-side rendering where the shopify global isn't available.
API access: Use the returned shopify object to call any App Bridge API from within a React component.
Framework compatibility: Integrate App Bridge with React-based frameworks like React Router or Remix.

Anchor to useAppBridge hookuseAppBridge hook

The useAppBridge hook is available for use in your app. It returns the shopify global or a proxy when not in a browser environment.

For more information, see the global variable section and the individual reference pages like Toast and Resource Picker.

export interface {}

Examples

tsx

import {useAppBridge} from '@shopify/app-bridge-react';

export function GenerateBlogPostButton() {

const shopify = useAppBridge();

function generateBlogPost() {

// Handle generating

shopify.toast.show('Blog post template generated');

}

return <button onClick={generateBlogPost}>Generate Blog Post</button>;

}

Examples

tsx

import {useAppBridge} from '@shopify/app-bridge-react';

export function GenerateBlogPostButton() {
  const shopify = useAppBridge();

  function generateBlogPost() {
    // Handle generating
    shopify.toast.show('Blog post template generated');
  }

  return <button onClick={generateBlogPost}>Generate Blog Post</button>;
}

Anchor to RelatedRelated

APIshopify global variable

Was this page helpful?