open-index/open-npm huggingface dataset:
npm package: @ringcentral/web-apps-react
Description: RingCentral Web Apps React ===============================
Latest version: 0.7.8

RingCentral Web Apps React
===============================

The purpose of this library is to synchronize page `location` with `history` object of React.

The reason why it is needed is this bug of React Router: https://github.com/ReactTraining/react-router/issues/7113.

## Usage

**This library can be used without Web Apps.**

Simply put the `LocationSync` anywhere under `Router` in your hierarchy of components:

```js
import {BrowserRouter, Route} from 'react-router-dom';
import {LocationSync} from '@ringcentral/web-apps-react';

export default () => (
    <BrowserRouter>
        <LocationSync />
        <Route />
        <Route />
        <Route />
        <Route />
    </BrowserRouter>
);
```
npm package: @ringcentral/web-apps-sync
Description: RingCentral Web Apps Sync =========================
Latest version: 0.7.8

RingCentral Web Apps Sync
=========================

This library can be used to synchronize parent frame and the IFRAME:

- URL of parent frame and `IFRAME`
- `IFRAME` size will be set according to it's content
- CustomEvents on the `IFRAME` DOM node will be transmitted to and from the page inside `IFRAME`
npm package: @ringcentral/web-apps-sync-host
Description: RingCentral Web Apps Sync Host ==============================
Latest version: 0.7.8

RingCentral Web Apps Sync Host
==============================

This library can be used to synchronize parent frame and the IFRAME:

- URL of parent frame and IFRAME
- IFRAME size will be set according to it's content
- CustomEvents on the IFRAME DOM node will be transmitted to and from the page inside IFRAME

## Usage: Host part

```js
import {HostSync} from "@ringcentral/web-apps-sync/lib/host";
import {makeEvent, eventType} from "@ringcentral/web-apps-common";
import {createBrowserHistory} from 'history';

const history = createBrowserHistory();
const iframe = document.getElementById('iframe');

const hostSync = new HostSync({
    url: 'http://path-to-iframe-page.com',
    iframe,
    history,
});

iframe.addEventListener(eventType.message, data => console.log(data));
iframe.dispatchEvent(makeEvent(eventType.message, {foo: 'bar'}));
```

Usage of `history` is optional. You can supply any history-like object with following API:

```js
const history = {
    listen: () => {}, // listen to pushState events, should return unsubscribe callback
    replace: (url, state) => window.history.replaceState(state, null, url), 
    push: (url, state) => window.history.pushState(state, null, url),
    get location() {
        return window.location;
    },
};
```
npm package: @ringcentral/web-apps-sync-iframe
Description: RingCentral Web Apps Sync IFRAME ================================
Latest version: 0.7.8

RingCentral Web Apps Sync IFRAME
================================

This library can be used to synchronize parent frame and the IFRAME:

- URL of parent frame and IFRAME
- IFRAME size will be set according to it's content
- CustomEvents on the IFRAME DOM node will be transmitted to and from the page inside IFRAME

## Usage: IFRAME part

```js
import {IFrameSync} from "@ringcentral/web-apps-sync/lib/iframe";
import {makeEvent, eventType} from "@ringcentral/web-apps-common";

const iframeSync = new IFrameSync({
    history: 'html5', // also can be hash or custom history object
    sendInitialLocation: true // will trigger location event once created
});

iframeSync.getEventTarget().addEventListener(eventType.message, data => console.log(data));
iframeSync.getEventTarget().dispatchEvent(makeEvent(eventType.message, {foo: 'bar'}));
```

For react applications to simplify link between Sync and History follow this pattern:

```jsx
import {createBrowserHistory} from 'history';
import {Router} from 'react-router-dom';

const history = createBrowserHistory();

const iframeSync = new IFrameSync({history});

export defult <Router history={history}>...</Router>;
```
npm package: @ringcentral/web-apps-sync-react
Description: RingCentral Web Apps Sync React ===============================
Latest version: 0.7.8

RingCentral Web Apps Sync React
===============================

This library can be used to synchronize parent frame and the IFRAME.

It is a small React wrapper for the main sync library.

It also normalizes the React Router history object as there are discrepancies between versions 3 and 4+.

**This library can be used without Web Apps.**
npm package: @ringcentral/web-apps-sync-web-component
Description: RingCentral Web Apps Sync Web Component =======================================
Latest version: 0.7.8

RingCentral Web Apps Sync Web Component
=======================================

This library can be used to synchronize parent frame and the IFRAME.

It is a small Web Component wrapper for the main sync library.

It also normalizes the React Router history object as there are discrepancies between versions 3 and 4+.

**This library can be used without Web Apps.**