---
title: useAppBridge
description: >-
  The useAppBridge hook returns the shopify global variable to use App Bridge
  APIs such as toast and resourcePicker. Use this hook to access built-in
  functionality like displaying toast notifications, opening resource pickers,
  and navigating within your app.
source_url:
  html: 'https://shopify.dev/docs/api/app-home/apis/react-hooks/useappbridge'
  md: 'https://shopify.dev/docs/api/app-home/apis/react-hooks/useappbridge.md'
---

# useAppBridge

**Requires \[\`@shopify/app-bridge-react\@v4\`]\(https://www\.npmjs.com/package/@shopify/app-bridge-react) and the \[\`app-bridge.js\` script tag]\(/docs/api/app-bridge-library#getting-started):**

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

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

### use​App​Bridge 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](https://shopify.dev/docs/api/app-bridge-library#shopify-global-variable) and the individual reference pages like [Toast](https://shopify.dev/docs/api/app-bridge-library/apis/toast) and [Resource Picker](https://shopify.dev/docs/api/app-bridge-library/apis/resource-picker).

* **export interface UseAppBridge {}**

Examples

### Examples

* ####

  ##### tsx

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

***

## Related

[API - shopify global variable](https://shopify.dev/docs/api/app-bridge-library#shopify-global-variable)

***