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

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-sho

Route Propagator is now part of @shopify/app-bridge-react, starting from version 1.17.0
Last updated 5 months ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-shopify-app-route-propagator 
SYNC missed versions from official npm registry.

@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;
});

Current Tags

  • 3.0.8                                ...           latest (5 months ago)

26 Versions

  • 3.0.8 [deprecated]           ...           5 months ago
  • 3.0.7 [deprecated]           ...           6 months ago
  • 3.0.6 [deprecated]           ...           7 months ago
  • 3.0.5 [deprecated]           ...           8 months ago
  • 3.0.4 [deprecated]           ...           8 months ago
  • 3.0.3 [deprecated]           ...           9 months ago
  • 3.0.2 [deprecated]           ...           10 months ago
  • 3.0.1 [deprecated]           ...           10 months ago
  • 3.0.0 [deprecated]           ...           a year ago
  • 2.0.3 [deprecated]           ...           a year ago
  • 2.0.2 [deprecated]           ...           a year ago
  • 2.0.1 [deprecated]           ...           a year ago
  • 2.0.0 [deprecated]           ...           a year ago
  • 1.0.14 [deprecated]           ...           2 years ago
  • 1.0.13 [deprecated]           ...           2 years ago
  • 1.0.12 [deprecated]           ...           2 years ago
  • 1.0.11 [deprecated]           ...           2 years ago
  • 1.0.10 [deprecated]           ...           2 years ago
  • 1.0.8 [deprecated]           ...           2 years ago
  • 1.0.7 [deprecated]           ...           2 years ago
  • 1.0.6 [deprecated]           ...           2 years ago
  • 1.0.5 [deprecated]           ...           2 years ago
  • 1.0.4 [deprecated]           ...           2 years ago
  • 1.0.3 [deprecated]           ...           2 years ago
  • 1.0.2 [deprecated]           ...           2 years ago
  • 1.0.1 [deprecated]           ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |