{"id":21582663,"url":"https://github.com/lazorfuzz/react-liowebrtc","last_synced_at":"2025-04-10T18:54:15.846Z","repository":{"id":32974810,"uuid":"148391346","full_name":"lazorfuzz/react-liowebrtc","owner":"lazorfuzz","description":"A React component library that makes it easy to add p2p communication into components via LioWebRTC.","archived":false,"fork":false,"pushed_at":"2022-12-10T20:35:56.000Z","size":1139,"stargazers_count":17,"open_issues_count":40,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:09:26.652Z","etag":null,"topics":["communication","component-library","liowebrtc","p2p","peer-to-peer","react","web","webrtc","webrtc-video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lazorfuzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-11T23:10:10.000Z","updated_at":"2023-04-18T16:03:54.000Z","dependencies_parsed_at":"2023-01-14T23:01:10.825Z","dependency_job_id":null,"html_url":"https://github.com/lazorfuzz/react-liowebrtc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazorfuzz%2Freact-liowebrtc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazorfuzz%2Freact-liowebrtc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazorfuzz%2Freact-liowebrtc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lazorfuzz%2Freact-liowebrtc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lazorfuzz","download_url":"https://codeload.github.com/lazorfuzz/react-liowebrtc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248275457,"owners_count":21076596,"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":["communication","component-library","liowebrtc","p2p","peer-to-peer","react","web","webrtc","webrtc-video"],"created_at":"2024-11-24T14:16:30.805Z","updated_at":"2025-04-10T18:54:15.824Z","avatar_url":"https://github.com/lazorfuzz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-liowebrtc\n\n\u003e A React component library that makes it easy to add p2p communication into components via LioWebRTC.\n\n[![NPM](https://img.shields.io/npm/v/react-liowebrtc.svg)](https://www.npmjs.com/package/react-liowebrtc)\n## Install\n\n```bash\nnpm i react-liowebrtc --save\n```\nOr\n```bash\nyarn add react-liowebrtc\n```\n\n## Demo\nhttps://react-liowebrtc.netlify.com\n\n## Usage\n\n### Example Component (Data Channels only)\n\n```jsx\nimport React, { Component } from 'react';\nimport { LioWebRTC } from 'react-liowebrtc'\nimport MyComponent from './MyComponent';\n\nclass Example extends Component {\n\n  handlePeerData = (webrtc, type, payload, peer) =\u003e {\n    if (type === 'event-label') {\n      console.log(payload);\n    }\n  }\n\n  render () {\n    return (\n      \u003cLioWebRTC\n        options={{ dataOnly: true }}\n        onReady={this.joinRoom}\n        onCreatedPeer={this.handleCreatedPeer}\n        onReceivedPeerData={this.handlePeerData}\n        onRemovedPeer={this.handlePeerLeft}\n      \u003e\n        \u003cMyComponent /\u003e\n      \u003c/LioWebRTC\u003e\n    )\n  }\n}\n```\n\n#### MyComponent\n\n```jsx\nimport React, { Component } from 'react';\nimport { withWebRTC } from 'react-liowebrtc';\n\nclass MyComponent extends Component {\n\n  handleClick = () =\u003e this.props.webrtc.shout('event-label', 'payload');\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.handleClick}\u003e\n          Click Me\n        \u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default withWebRTC(MyComponent);\n```\n\n### Video Chat Example\n```jsx\nimport React, { Component } from 'react';\nimport { LioWebRTC, LocalVideo, RemoteVideo } from 'react-liowebrtc'\n\nclass ExampleVideoChat extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      peers: []\n    };\n  }\n\n  join = (webrtc) =\u003e webrtc.joinRoom('video-chat-room-arbitrary-name');\n\n  handleCreatedPeer = (webrtc, peer) =\u003e {\n    this.setState({ peers: [...this.state.peers, peer] });\n  }\n\n  handleRemovedPeer = () =\u003e {\n    this.setState({ peers: this.state.peers.filter(p =\u003e !p.closed) });\n  }\n\n  generateRemotes = () =\u003e this.state.peers.map((peer) =\u003e (\n    \u003cRemoteVideo key={`remote-video-${peer.id}`} peer={peer} /\u003e\n  ));\n\n  render () {\n    return (\n      \u003cLioWebRTC\n        options={{ debug: true }}\n        onReady={this.join}\n        onCreatedPeer={this.handleCreatedPeer}\n        onRemovedPeer={this.handleRemovedPeer}\n      \u003e\n        \u003cLocalVideo /\u003e\n        {\n          this.state.peers \u0026\u0026\n          this.generateRemotes()\n        }\n      \u003c/LioWebRTC\u003e\n    )\n  }\n}\n\nexport default ExampleVideoChat;\n```\n\n## Component Props\n\n### LioWebRTC Component\n```jsx\nLioWebRTC.propTypes = {\n  options: PropTypes.object, // Initializing options passed into the liowebrtc library\n  onReady: PropTypes.func, // Event listeners\n  onJoinedRoom: PropTypes.func, // When we successfully join a room\n  onReceivedPeerData: PropTypes.func, // When we receive a shout or whisper from a peer\n  onChannelOpen: PropTypes.func, // When a new data channel is established with a peer\n  onConnectionReady: PropTypes.func, // When the signaling connection is ready\n  onCreatedPeer: PropTypes.func, // When a new peer connects\n  onPeerStreamAdded: PropTypes.func, // When a peer media stream is added\n  onPeerStreamRemoved: PropTypes.func, // When a peer media stream is removed\n  onIceConnectionStateChange: PropTypes.func, // When the connection state with a peer changes\n  onSignalingStateChange: PropTypes.func, // When the connection to the signaling server changes\n  onLeftRoom: PropTypes.func, // When exited the room\n  onPeerMute: PropTypes.func, // When a peer mutes themselves\n  onReceivedSignalData: PropTypes.func, // When we get a message via the signaling server from a peer\n  onPeerUnmute: PropTypes.func, // When a peer unmutes themselves\n  onRemovedPeer: PropTypes.func, // When a peer disconnects from us\n  onConnectionError: PropTypes.func // When an error occurs in connecting to a peer\n};\n```\nAll event emitters pass a webrtc session manager object to the listener functions. For example, the  `onReceivedPeerData` event passes the following objects: `(webrtc, type, data, peer)`. The `onCreatedPeer` event passes `(webrtc, peer)`. Take a look at the [LioWebRTC docs](https://github.com/lazorfuzz/liowebrtc) for more information on LioWebRTC's events and methods.  All events emitted by LioWebRTC will have a preceding webrtc object when using react-liowebrtc.\n\n### LocalVideo Component\n```jsx\nLocalVideo.propTypes = {\n  videoProps: PropTypes.object, // props passed to the inner video element\n};\n```\n\n### RemoteVideo Component\n```jsx\nRemoteVideo.propTypes = {\n  videoProps: PropTypes.object, // props passed to the inner video element\n  peer: PropTypes.instanceOf(Peer) // the Peer instance\n};\n```\n\nThese props are needed to initialize and set event listeners for the liowebrtc library. Take a look at the [liowebrtc](https://github.com/lazorfuzz/liowebrtc) docs for more info.\n\nFor more info, please take a look at this [tutorial](https://medium.com/@leontosy/building-a-p2p-web-app-with-react-and-liowebrtc-6a7e8c621085) showing how to build a chat room with react-liowebrtc.\n\n## License\n\nMIT © [lazorfuzz](https://github.com/lazorfuzz)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazorfuzz%2Freact-liowebrtc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flazorfuzz%2Freact-liowebrtc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flazorfuzz%2Freact-liowebrtc/lists"}