Wondering what’s next for npm?Check out our public roadmap! »

    This package has been deprecated

    Author message:

    Route Propagator is now part of @shopify/app-bridge-react, starting from version 1.17.0

    @shopify/react-shopify-app-route-propagator
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.8 • Public • Published

    @shopify/react-shopify-app-route-propagator

    Build Status License: MIT npm version npm bundle size (minified + gzip)

    This package contains both a hook, useRoutePropagation, and a component <RoutePropagator />, API. Both of these allow you to synchronize a Shopify embedded app's client side routing with the outer iframe host. It assumes the embedded app is either using Shopify's App Bridge Library or @shopify/app-bridge-react

    The package is quite small and can be used with any routing solution.

    Installation

    $ yarn add @shopify/app-bridge @shopify/react-shopify-app-route-propagator

    Usage

    Both the hook and component versions of this library take the same two parameters:

    import {ClientApplication} from '@shopify/app-bridge';
     
    export type LocationOrHref = 
      | string
      | {search: string; hash: string; pathname: string};
     
    export interface Props {
      app: ClientApplication<any>;
      location: LocationOrHref;
    }

    useRoutePropagation

    This example uses app bridge to create an app instance and the withRouter enhancer from react-router.

    import React from 'react';
    import {Switch, Route, withRouter} from 'react-router'
    import {BrowserRouter} from 'react-router-dom'
    import createApp, {getShopOrigin} from '@shopify/app-bridge';
    import {useRoutePropagation} from '@shopify/react-shopify-app-route-propagator';
     
    const app = createApp({
      apiKey: 'API key from Shopify Partner Dashboard',
      shopOrigin: getShopOrigin(),
    });
     
    export default withRouter(function Routes(props) {
      useRoutePropagation(
        app,
        props.location
      );
     
      return (
        <Switch>
          <Route exact path="/">
          { /* other routes */ }
        </Switch>
      );
    })

    <RoutePropagator />

    This example assume the consuming app uses both

    // App.tsx
    import React from 'react';
    import {BrowserRouter} from 'react-router';
    import {Provider as AppBridgeProvider} from '@shopify/app-bridge-react';
    import {getShopOrigin} from '@shopify/app-bridge';
     
    import RoutePropagator from '../RoutePropagator';
     
    export default function MyApp() {
      return (
        <BrowserRouter>
          <AppBridgeProvider
            config={{
              apiKey: 'API key from Shopify Partner Dashboard',
              shopOrigin: getShopOrigin(),
            }}
          >
            <RoutePropagator />
            <Routes />
          </AppBridgeProvider>
        </BrowserRouter>
      );
    })
    // RoutePropagator.tsx
    import React from 'react';
    import {withRouter, RouteComponentProps} from 'react-router';
     
    import {RoutePropagator} from '@shopify/react-shopify-app-route-propagator';
    import {Context as AppBridgeContext} from '@shopify/app-bridge-react';
     
    export default withRouter(function Routes({
      location,
      server,
    }: RouteComponentProps & Props) {
      const app = React.useContext(AppBridgeContext);
     
      return !server && app && location ? (
        <RoutePropagator location={location} app={app} />
      ) : null;
    });

    Keywords

    none

    Install

    npm i @shopify/react-shopify-app-route-propagator

    DownloadsWeekly Downloads

    1,171

    Version

    3.0.8

    License

    MIT

    Unpacked Size

    10.3 kB

    Total Files

    18

    Last publish

    Collaborators

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