Provider

Setup

Import the Provider from @shopify/app-bridge-react. Only one Provider is needed for your application.

Props

Name Type Description Required
config AppConfig Your application configuration Yes

AppConfig

Name Type Description Required
apiKey string API key from Shopify Partner Dashboard Yes
host string The hostname for the current shop. Learn more Yes
forceRedirect boolean Use to toggle redirecting to Shopify Admin when the app is not opened inside the Shopify Admin. Defaults to true.

Using App Bridge React with Polaris

App Bridge React is fully compatible with Polaris. To use them together, wrap your app in both Polaris’s <AppProvider> component and App Bridge React’s <Provider> component.

Accessing the App Bridge client directly

App Bridge React provides access to the App Bridge client app instance using the React Context API. There are four ways to use the context API: useAppBridge, useContext, Context.Consumer, and Class.contextType.

The useAppBridge hook is available in version 1.25.0 and above. You can use the useAppBridge hook to quickly access the App Bridge client app in a functional component.

If you're using a version of App Bridge below 1.25.0 where the useAppBridge hook isn't available, use React’s useContext hook directly.

Use Context.Consumer to get access to the App Bridge client app in a render prop.

Use Class.contextType to get access to the App Bridge client app in a class component.