Actions

The code examples in this section assume you’re using modular JavaScript patterns. If you're using the CDN-hosted version of Shopify App Bridge, then you can achieve the same results by replacing imports with objects on the window['app-bridge'] global.

Instead of:

Use:

All other example code should function as-is.

Both hosts, such as the Shopify admin or Shopify POS, and apps can dispatch actions.

This example demonstrates the app setup and dispatching a Redirect action.

Import the createApp function from @shopify/app-bridge and the Redirect from @shopify/app-bridge/actions. Then use the createApp function to create an app.

Action sets group simple actions. Each instance of an action set has a unique ID that makes it possible for apps to subscribe to them. Think of action sets as a persisted set of actions that the app can dispatch or subscribe to at any time.

This example demostrates the use of a Toast action set.

Shopify App Bridge offers React component wrappers for some actions. This is a great option if you are already using React and want to follow familiar patterns.

Like App Bridge itself, the App Bridge React component library is available as a JavaScript module on npm.

You can access the App Bridge client app inside App Bridge React using the React Context API. See the <Provider> component for more information.

This example demonstrates the app setup with React and using the React TitleBar component.

Import the Provider and TitleBar from @shopify/app-bridge-react. Create a configuration object with your client ID and host, then pass that object into the Provider.

App Bridge React is fully compatible with Polaris. While App Bridge provides access to features outside of your app, Polaris provides components to build within your app. To use both together, wrap your app in both Polaris’s <AppProvider> component as well as App Bridge React’s <Provider> component.

See the <Provider> component for more information.