{"id":15313863,"url":"https://github.com/itsdouges/react-peer","last_synced_at":"2025-07-18T17:05:29.023Z","repository":{"id":56065701,"uuid":"167881519","full_name":"itsdouges/react-peer","owner":"itsdouges","description":"Send data to someone else's browser as easy as setting state","archived":false,"fork":false,"pushed_at":"2020-12-03T14:44:56.000Z","size":145,"stargazers_count":195,"open_issues_count":6,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-27T04:50:56.882Z","etag":null,"topics":["javascript","p2p","peer-to-peer","peerjs","react","react-hooks","reactjs","typescript","web-rtc"],"latest_commit_sha":null,"homepage":"https://react-peer.netlify.com","language":"TypeScript","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/itsdouges.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-28T01:44:33.000Z","updated_at":"2025-06-03T15:08:23.000Z","dependencies_parsed_at":"2022-08-15T12:31:04.440Z","dependency_job_id":null,"html_url":"https://github.com/itsdouges/react-peer","commit_stats":null,"previous_names":["madou/react-peer"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/itsdouges/react-peer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-peer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-peer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-peer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-peer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdouges","download_url":"https://codeload.github.com/itsdouges/react-peer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdouges%2Freact-peer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262207104,"owners_count":23275097,"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":["javascript","p2p","peer-to-peer","peerjs","react","react-hooks","reactjs","typescript","web-rtc"],"created_at":"2024-10-01T08:43:26.118Z","updated_at":"2025-06-28T11:04:10.056Z","avatar_url":"https://github.com/itsdouges.png","language":"TypeScript","readme":"# react-peer\n\n[![Build Status](https://travis-ci.org/madou/react-peer.svg?branch=master)](https://travis-ci.org/madou/react-peer)\n[![npm](https://img.shields.io/npm/v/react-peer.svg)](https://www.npmjs.com/package/react-peer)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-peer.svg)](https://bundlephobia.com/result?p=react-peer)\n[![Dev Dependencies](https://david-dm.org/madou/react-peer/status.svg)](https://david-dm.org/madou/react-peer)\n[![Dev Dependencies](https://david-dm.org/madou/react-peer/peer-status.svg)](https://david-dm.org/madou/react-peer?type=peer)\n[![Dev Dependencies](https://david-dm.org/madou/react-peer/dev-status.svg)](https://david-dm.org/madou/react-peer?type=dev)\n\nUsing the power of [WebRTC](https://webrtc.org/faq/#what-is-webrtc) and [peerjs](https://peerjs.com/) you can send data to someone else's browser as easy as using setState() ⚛🍐\n\n## Installation\n\nUses [peerjs](https://peerjs.com/) under the hood.\nRequires at least `react@^16.3.0` and `react-dom@^16.3.0`.\nComes with TypeScript types out-of-the-box.\n\n```bash\nnpm install react-peer react react-dom --save\n```\n\n```bash\nyarn add react-peer react react-dom\n```\n\n## Usage\n\n### `usePeerState\u003cTState\u003e(initialState?: TState, opts?: { brokerId?: string }): [TState, Function, string, Peer.DataConnection[], PeerError | undefined];`\n\n**⚠️ Make sure to use `react@^16.8.0` and `react-dom@^16.8.0` if wanting to use hooks. Unsure what hooks are? [Check out their introduction!](https://reactjs.org/docs/hooks-intro.html) ⚠️**\n\nBehaves as your regular [`useState()`](https://reactjs.org/docs/hooks-state.html) hook,\nbut will **eventually** send data to any connected peers.\nPeers can connect to you using the `brokerId` that is **eventually** returned.\n\n`opts.brokerId` is optionally used when you already have a broker id generated.\n\n```js\nimport { usePeerState } from 'react-peer';\n\nconst App = () =\u003e {\n  const [state, setState, brokerId, connections, error] = usePeerState();\n\n  setState({ message: 'hello' });\n};\n```\n\n### `useReceivePeerState\u003cTState\u003e(peerBrokerId: string, opts?: { brokerId?: string }): [TState | undefined, boolean, PeerError | undefined];`\n\n**⚠️ Make sure to use `react@^16.8.0` and `react-dom@^16.8.0` if wanting to use hooks. Unsure what hooks are? [Check out their introduction!](https://reactjs.org/docs/hooks-intro.html) ⚠️**\n\nWill receive peer state **eventually** from a peer identified using `peerBrokerId`.\n\n`opts.brokerId` is optionally used when you already have a broker id generated.\n\n```js\nimport { useReceivePeerState } from 'react-peer';\n\nconst App = () =\u003e {\n  const [state, isConnected, error] = useReceivePeerState('swjg3ls4bq000000');\n};\n```\n\n### `\u003cPeerStateProvider /\u003e`\n\nUseful if not yet using react hooks.\nWhen setting the value prop it will propagate it to all connected peers.\n\n`brokerId` prop is optionally used when you already have a broker id generated.\n\n```js\nimport { PeerStateProvider } from 'react-peer';\n\n\u003cPeerStateProvider value={{ message: 'hello' }}\u003e\n  {({ brokerId, connections, error }) =\u003e \u003cdiv /\u003e}\n\u003c/PeerStateProvider\u003e;\n```\n\n### `\u003cReceivePeerState /\u003e`\n\nUseful if not yet using react hooks.\nWill receive data from the peer broker.\n\n`brokerId` prop is optionally used when you already have a broker id generated.\n\n```js\nimport { ReceivePeerState } from 'react-peer';\n\n\u003cReceivePeerState peerBrokerId=\"swjg3ls4bq000000\"\u003e\n  {({ data, isConnected, error }) =\u003e \u003cdiv /\u003e}\n\u003c/ReceivePeerState\u003e;\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-peer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdouges%2Freact-peer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdouges%2Freact-peer/lists"}