Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@shopify/app-bridge-react

1.14.0 • Public • Published

@shopify/app-bridge-react

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

Instead of using App Bridge actions directly:

import createApp from '@shopify/app-bridge';
import {TitleBar} from '@shopify/app-bridge/actions';
 
const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});
 
const titleBarOptions = {
  title: 'My page title',
};
 
const myTitleBar = TitleBar.create(app, titleBarOptions);

Use the React component wrappers:

Note Only one Provider is needed for your application.

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, TitleBar} from '@shopify/app-bridge-react';
 
function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};
 
  return (
    <Provider config={config}>
      <TitleBar title="My page title"/>
    </Provider>
  );
}
 
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);

See Shopify Developers for full documentation.

License: MIT

Keywords

none

Install

npm i @shopify/app-bridge-react

DownloadsWeekly Downloads

5,882

Version

1.14.0

License

MIT

Unpacked Size

174 kB

Total Files

39

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar