use App Bridge
Requires
@shopify/app-bridge-react@v4
and the app-bridge.js
script tagThe hook returns the
shopify
global variable to use App Bridge APIs such as toast
and .
Anchor to useappbridge hookuseAppBridge hook
The 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.
UseAppBridge
export interface UseAppBridge {}
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
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>; }