useAppBridge

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?

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

}