Provider
Import the Provider
from @shopify/app-bridge-react
. Only one Provider
is needed for your application.
Name | Type | Description | Required |
---|---|---|---|
config | AppConfig |
Your application configuration | Yes |
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
Anchor link to section titled "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
Anchor link to section titled "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.