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 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.

Was this section helpful?

UseAppBridge

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

useAppBridge

Default

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