@shopify/channels-ui
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

Channels UI

npm version

@shopify/channels-ui is a React component library designed to help developers create the best marketplace channel experiences for merchants. This library shares many of the same philosophies as Polaris, and we recommend giving their style guide and codebase a look if you're building a marketplace channel app.

Marketplace development

For more information about creating marketplaces on Shopify, take a look at the marketplace documentation.

Using the React components

Installation

Run the following command using npm:

npm install --save @shopify/channels-ui

If you prefer Yarn, use the following command instead:

yarn add @shopify/channels-ui

Usage

To use the React components you need to wrap your React app in the ExtendedAppProvider provided by Channels UI. This also adds the Polaris App Provider, and App Bridge Provider, so you do not need to add these providers again. Only one ExtendedAppProvider is needed for your application.

  1. Import Polaris and Channels UI CSS directly into your project:
import '@shopify/polaris/build/esm/styles.css';
import '@shopify/channels-ui/build/esm/styles.css';
  1. Include the translations and any Polaris or Channel UI components in your project:
import polarisTranslations from '@shopify/polaris/locales/en.json';
import channelsUiTranslations from '@shopify/channels-ui/locales/en.json';
import {ExtendedAppProvider, IntroductionPage} from '@shopify/channels-ui';
import {Card, Button} from '@shopify/polaris';

If your channel supports multiple languages, you can dynamically import translations from the desired locale.

  1. Tell React to render the element in the DOM:
const appBridgeConfig = {
  apiKey: 'API key from Shopify Partner Dashboard',
  host: 'host from URL search parameter',
  forceRedirect: true,
};

ReactDOM.render(
  <ExtendedAppProvider
    config={appBridgeConfig}
    polaris={{i18n: polarisTranslations}}
    i18n={channelsUiTranslations}
  >
    <IntroductionPage title="Example channel">
      <Card title="Welcome" sectioned>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
      </Card>
    </IntroductionPage>
  </ExtendedAppProvider>,
  document.querySelector('#app'),
);

See the Getting started guide for more information on how to build a simple marketplace channel app experience.

See our component documentation for a list of available components and how to use them.

Package Sidebar

Install

npm i @shopify/channels-ui

Weekly Downloads

352

Version

1.0.3

License

MIT

Unpacked Size

980 kB

Total Files

619

Last publish

Collaborators

  • jaimie.rockburn
  • blittle
  • shopify-admin
  • maryharte
  • crisfmb
  • pmoloney89
  • netlohan
  • st999999
  • justin-irl
  • megswim
  • wcandillon
  • nathanpjf
  • shopify-dep
  • goodforonefare
  • lemonmade
  • vsumner
  • wizardlyhel
  • antoine.grant
  • tsov
  • andyw8-shopify
  • henrytao
  • hannachen
  • vividviolet
  • bpscott