Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsdouges/react-peer
Send data to someone else's browser as easy as setting state
https://github.com/itsdouges/react-peer
javascript p2p peer-to-peer peerjs react react-hooks reactjs typescript web-rtc
Last synced: 3 days ago
JSON representation
Send data to someone else's browser as easy as setting state
- Host: GitHub
- URL: https://github.com/itsdouges/react-peer
- Owner: itsdouges
- License: mit
- Created: 2019-01-28T01:44:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-03T14:44:56.000Z (about 4 years ago)
- Last Synced: 2024-12-10T07:55:23.488Z (13 days ago)
- Topics: javascript, p2p, peer-to-peer, peerjs, react, react-hooks, reactjs, typescript, web-rtc
- Language: TypeScript
- Homepage: https://react-peer.netlify.com
- Size: 142 KB
- Stars: 197
- Watchers: 4
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-peer
[](https://travis-ci.org/madou/react-peer)
[](https://www.npmjs.com/package/react-peer)
[](https://bundlephobia.com/result?p=react-peer)
[](https://david-dm.org/madou/react-peer)
[](https://david-dm.org/madou/react-peer?type=peer)
[](https://david-dm.org/madou/react-peer?type=dev)
Using 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() ⚛🍐
## Installation
Uses [peerjs](https://peerjs.com/) under the hood.
Requires at least `react@^16.3.0` and `react-dom@^16.3.0`.
Comes with TypeScript types out-of-the-box.
```bash
npm install react-peer react react-dom --save
```
```bash
yarn add react-peer react react-dom
```
## Usage
### `usePeerState(initialState?: TState, opts?: { brokerId?: string }): [TState, Function, string, Peer.DataConnection[], PeerError | undefined];`
**⚠️ 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) ⚠️**
Behaves as your regular [`useState()`](https://reactjs.org/docs/hooks-state.html) hook,
but will **eventually** send data to any connected peers.
Peers can connect to you using the `brokerId` that is **eventually** returned.
`opts.brokerId` is optionally used when you already have a broker id generated.
```js
import { usePeerState } from 'react-peer';
const App = () => {
const [state, setState, brokerId, connections, error] = usePeerState();
setState({ message: 'hello' });
};
```
### `useReceivePeerState(peerBrokerId: string, opts?: { brokerId?: string }): [TState | undefined, boolean, PeerError | undefined];`
**⚠️ 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) ⚠️**
Will receive peer state **eventually** from a peer identified using `peerBrokerId`.
`opts.brokerId` is optionally used when you already have a broker id generated.
```js
import { useReceivePeerState } from 'react-peer';
const App = () => {
const [state, isConnected, error] = useReceivePeerState('swjg3ls4bq000000');
};
```
### ``
Useful if not yet using react hooks.
When setting the value prop it will propagate it to all connected peers.
`brokerId` prop is optionally used when you already have a broker id generated.
```js
import { PeerStateProvider } from 'react-peer';
{({ brokerId, connections, error }) =>
}
;
```
### ``
Useful if not yet using react hooks.
Will receive data from the peer broker.
`brokerId` prop is optionally used when you already have a broker id generated.
```js
import { ReceivePeerState } from 'react-peer';
{({ data, isConnected, error }) =>
}
;
```