New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-cross-client-router

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cross-client-router

A tool to control React apps spanning multiple tabs, windows or devices

  • 1.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

react-cross-client-router

NPM

A tool to control React apps spanning multiple tabs, windows or devices.

Control the tab on your second screen by using your first screen, all without using a server.

  • Run the example app to see it in action.
  • Checkout the example/ folder for source code.

Features

  • Channel agnostic:
    • Uses broadcast-channel for a frontend-only implementation
    • Supports websockets to control apps spanning multiple devices.
  • Uses the url to control tabs, dependent on react-router-dom
  • Keeps track of active tabs, detects when tabs quit.
  • Tab IDs are persistent.

Demo

alt text

Install

yarn add broadcast-channel react-cross-client-router

Quick start

It is recommended to make the ClientRouterProvider a child of the react-router-dom BrowserRouter.

import React from 'react';
import BroadcastChannel from 'broadcast-channel';
import { ClientRouterProvider, ClientLink } from 'react-cross-client-router'

export default () => (
  <ClientRouterProvider
    channel={new BroadcastChannel('react-cross-tab-router')}
    storage={window.sessionStorage}
  >
    <ClientLink targetTab="parent" to="/foo">
      Link parent tab to /foo
    </ClientLink>
    <ClientLink targetTab="parent" to="/bar">
      Link parent tab to /foo
    </ClientLink>
    <ClientLink targetTab="child" to="/foo">
      Link child tab to /foo
    </ClientLink>
    <ClientLink targetTab="child" to="/bar">
      Link child tab to /foo
    </ClientLink>
  </ClientRouterProvider>
)

FAQs

Package last updated on 08 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc