Provider
Setup
Import the Provider
from @shopify/app-bridge-react
. Only one Provider
is needed for your application.
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, Loading} from '@shopify/app-bridge-react';
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
return (
<Provider config={config}>
<Loading />
</Provider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
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 |
shopOrigin | 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.
Pass the config
object containing the apiKey
and shopOrigin
values to the App Bridge React <Provider>
config prop.
Don't pass the apiKey
or shopOrigin
values to the Polaris <AppProvider>
component.
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, Loading} from '@shopify/app-bridge-react';
import {AppProvider, Card} from '@shopify/polaris';
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
return (
<AppProvider>
<Provider config={config}>
<Loading />
<Card />
</Provider>
</AppProvider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
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
.