# @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

Latest version **3.0.8** (published 2020-01-31) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @shopify/react-shopify-app-route-propagator
pnpm add @shopify/react-shopify-app-route-propagator
yarn add @shopify/react-shopify-app-route-propagator
bun add @shopify/react-shopify-app-route-propagator
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.8 |
| Published | 2020-01-31 |
| First published | 2018-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shopify Inc. |
| Maintainers | antoine.grant, goodforonefare, harshal317, huguestennier, ismail.syed, lemonmade, marytal, nathanpjf, shopify-dep, themallen, thomaskelly, tsov, wizardlyhel |

## Links

- npm: https://www.npmjs.com/package/@shopify/react-shopify-app-route-propagator
- Repository: https://github.com/Shopify/quilt
- Homepage: https://github.com/Shopify/quilt/blob/master/packages/react-shopify-app-route-propagator/README.md
- Issues: https://github.com/Shopify/quilt/issues
- npm.io page: https://npm.io/package/@shopify/react-shopify-app-route-propagator

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.3

## Recent versions

- 3.0.8 (latest) — 2020-01-31
- 3.0.7 — 2020-01-08
- 3.0.6 — 2019-11-21
- 3.0.5 — 2019-11-15
- 3.0.4 — 2019-11-07
- 3.0.3 — 2019-10-17
- 3.0.2 — 2019-09-09
- 3.0.1 — 2019-08-28
- 3.0.0 — 2019-04-29
- 2.0.3 — 2019-04-23
- 2.0.2 — 2019-04-18
- 2.0.1 — 2019-04-15
- 2.0.0 — 2019-01-09
- 1.0.14 — 2018-12-05
- 1.0.13 — 2018-10-17
- … 11 more at https://npm.io/package/@shopify/react-shopify-app-route-propagator/versions

## README

# `@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-shopify-app-route-propagator.svg)](https://badge.fury.io/js/%40shopify%2Freact-shopify-app-route-propagator) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-shopify-app-route-propagator.svg)

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](https://help.shopify.com/en/api/embedded-apps/app-bridge) or [`@shopify/app-bridge-react`](https://github.com/Shopify/app-bridge/blob/master/packages/app-bridge-react/README.md)

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

## Installation

```bash
$ 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:

```typescript
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](https://help.shopify.com/en/api/embedded-apps/app-bridge#set-up-your-app) to create an app instance and the `withRouter` enhancer from `react-router`.

```javascript
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

- [`@shopify/app-bridge-react`](https://github.com/Shopify/app-bridge/blob/master/packages/app-bridge-react/README.md)
- `withRouter` enhancer from [`react-router`](https://github.com/ReactTraining/react-router)

```typescript
// 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>
  );
})
```

```typescript
// 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;
});
```

---
_Source: https://npm.io/package/@shopify/react-shopify-app-route-propagator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._