{"id":19256446,"url":"https://github.com/philips-software/react-cross-client-router","last_synced_at":"2025-04-21T15:30:51.705Z","repository":{"id":33971776,"uuid":"164592685","full_name":"philips-software/react-cross-client-router","owner":"philips-software","description":"A tool to control React apps spanning multiple tabs, windows or devices.","archived":false,"fork":false,"pushed_at":"2023-09-11T08:50:20.000Z","size":7149,"stargazers_count":15,"open_issues_count":27,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T06:36:38.064Z","etag":null,"topics":["cross-device","react","react-router"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philips-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-08T07:42:53.000Z","updated_at":"2023-07-17T21:30:58.000Z","dependencies_parsed_at":"2024-10-06T18:44:20.016Z","dependency_job_id":"7bdd5c45-b0b3-43bf-aa45-d4232f376c1e","html_url":"https://github.com/philips-software/react-cross-client-router","commit_stats":{"total_commits":116,"total_committers":6,"mean_commits":"19.333333333333332","dds":0.5603448275862069,"last_synced_commit":"00b8d189f07a07554f337a54ab0bfce364af8735"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philips-software%2Freact-cross-client-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philips-software%2Freact-cross-client-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philips-software%2Freact-cross-client-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philips-software%2Freact-cross-client-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philips-software","download_url":"https://codeload.github.com/philips-software/react-cross-client-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249838251,"owners_count":21332563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-device","react","react-router"],"created_at":"2024-11-09T19:05:40.703Z","updated_at":"2025-04-21T15:30:49.258Z","avatar_url":"https://github.com/philips-software.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-cross-client-router\n\n[![NPM](https://img.shields.io/npm/v/react-cross-client-router.svg)](https://www.npmjs.com/package/react-cross-client-router)\n[![Build Status](https://github.com/philips-software/react-cross-client-router/actions/workflows/node.js.yml/badge.svg)](https://github.com/philips-software/react-cross-client-router/actions/workflows/node.js.yml)\n\nA tool to control React apps spanning multiple tabs, windows or devices.\n\nControl the tab on your second screen by using your first screen, all without using a server.\n\n- Run the example app to see it in action.\n- Checkout the example/ folder for source code.\n\n## Features\n\n- Channel agnostic:\n  - Uses broadcast-channel for a frontend-only implementation\n  - Supports websockets to control apps spanning multiple devices.\n- Uses the url to control tabs, dependent on `react-router-dom`\n- Keeps track of active tabs, detects when tabs quit.\n- Tab IDs are persistent.\n\n## Demo\n\n![React cross client router example screencast](https://raw.githubusercontent.com/philips-software/react-cross-client-router/master/demo/screencast.gif)\n\n## Install\n\n```bash\nyarn add broadcast-channel react-cross-client-router\n```\n\n## Quick start\n\nThe example below shows one parent (or master) page that includes links to two child (or detail) pages.\nWhen you click on one of the links, a new tab will be opened that renders the detail view. If you move\nthe child to a separate browser (so that you can see both views at the same time), you can conveniently\nchange the content of the detail view by simply clicking on any of the two links in the master view.\nYou can even close the master view and the currently open detail view will be notified, providing you with a\nconvenience link to reopen the master view in the new tab.\n\n\n### Application entry point\n\n```jsx\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport BroadcastChannel from 'broadcast-channel'\nimport { BrowserRouter } from 'react-router-dom'\nimport { ClientRouterProvider, ClientRouterContext } from 'react-cross-client-router'\n\nimport { App } from './App'\n\nReactDOM.render(\n  \u003cBrowserRouter\u003e\n    \u003cClientRouterProvider\n      channel={new BroadcastChannel('react-cross-tab-router')}\n      storage={window.sessionStorage}\n    \u003e\n      \u003cApp /\u003e\n    \u003c/ClientRouterProvider\u003e\n  \u003c/BrowserRouter\u003e,\n  document.getElementById('root')\n)\n```\n\n### App\n\n```jsx\nimport React, { Component } from 'react'\nimport { Route } from 'react-router-dom'\nimport {\n  ClientRouterContext\n} from 'react-cross-client-router'\n\nimport { Master } from './Master'\nimport { Detail } from './Detail'\n\nclass App extends Component {\n  static contextType = ClientRouterContext;\n  render() {\n    const clientRouter = this.context;\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003ereact-cross-client-router example\u003c/h1\u003e\n        \u003cdiv\u003e\n          \u003cp\u003eTab name: {clientRouter.tabId}\u003c/p\u003e\n          \u003cp\u003eConnected tabs: {clientRouter.tabs.join(', ')}\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cRoute path='/' exact component={Master} /\u003e\n        \u003cRoute path='/detail/:id' component={Detail} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport { App }\n```\n\n### Master\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n  withClientRouter,\n  ClientLink\n} from 'react-cross-client-router'\n\nconst Master = withClientRouter(({ clientRouter }) =\u003e {\n  return (\n    \u003cdiv\u003e\n      {clientRouter.tabs.includes('detail') ? (\n        \u003ch2\u003e\n          The detail view tab exists, click an detail link to update\n          the content of the detail view...\n        \u003c/h2\u003e\n      ) : (\n        \u003ch2\u003eClick one of the links below to open the corresponding detail view in the new tab\u003c/h2\u003e\n      )}\n      \u003cClientLink targetTab='detail' to={'/detail/1'}\u003e\n        Detail View 1\n      \u003c/ClientLink\u003e\n      \u003cClientLink targetTab='detail' to={'/detail/2'}\u003e\n        Detail View 2\n      \u003c/ClientLink\u003e\n    \u003c/div\u003e\n  )\n})\n\nexport { Master }\n```\n\n### Detail\n\n```jsx\nimport React, { Component } from 'react';\nimport {\n  withClientRouter,\n  ClientLink\n} from 'react-cross-client-router'\n\nconst Detail = withClientRouter(({ match, clientRouter }) =\u003e {\n  const id = match.params.id\n  return (\n    \u003cdiv\u003e\n      {!clientRouter.tabs.includes('parent') \u0026\u0026 (\n        \u003cClientLink targetTab='parent' to='/'\u003e\n          \u003ch2\u003eThe parent tab seems to be closed, click here to reopen it.\u003c/h2\u003e\n        \u003c/ClientLink\u003e\n      )}\n      {`Detail with id=${id}`}\n    \u003c/div\u003e\n  )\n})\n\nexport { Detail }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilips-software%2Freact-cross-client-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilips-software%2Freact-cross-client-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilips-software%2Freact-cross-client-router/lists"}