madou / React Peer
Programming Languages
Projects that are alternatives of or similar to React Peer
react-peer
Using the power of WebRTC and peerjs you can send data to someone else's browser as easy as using setState() ⚛🍐
Installation
Uses peerjs under the hood.
Requires at least [email protected]^16.3.0
and [email protected]^16.3.0
.
Comes with TypeScript types out-of-the-box.
npm install react-peer react react-dom --save
yarn add react-peer react react-dom
Usage
usePeerState<TState>(initialState?: TState, opts?: { brokerId?: string }): [TState, Function, string, Peer.DataConnection[], PeerError | undefined];
⚠️ Make sure to use [email protected]^16.8.0
and [email protected]^16.8.0
if wanting to use hooks. Unsure what hooks are? Check out their introduction! ⚠️
Behaves as your regular useState()
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.
import { usePeerState } from 'react-peer';
const App = () => {
const [state, setState, brokerId, connections, error] = usePeerState();
setState({ message: 'hello' });
};
useReceivePeerState<TState>(peerBrokerId: string, opts?: { brokerId?: string }): [TState | undefined, boolean, PeerError | undefined];
⚠️ Make sure to use [email protected]^16.8.0
and [email protected]^16.8.0
if wanting to use hooks. Unsure what hooks are? Check out their introduction! ⚠️
Will receive peer state eventually from a peer identified using peerBrokerId
.
opts.brokerId
is optionally used when you already have a broker id generated.
import { useReceivePeerState } from 'react-peer';
const App = () => {
const [state, isConnected, error] = useReceivePeerState('swjg3ls4bq000000');
};
<PeerStateProvider />
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.
import { PeerStateProvider } from 'react-peer';
<PeerStateProvider value={{ message: 'hello' }}>
{({ brokerId, connections, error }) => <div />}
</PeerStateProvider>;
<ReceivePeerState />
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.
import { ReceivePeerState } from 'react-peer';
<ReceivePeerState peerBrokerId="swjg3ls4bq000000">
{({ data, isConnected, error }) => <div />}
</ReceivePeerState>;