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 react@^16.3.0 and react-dom@^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 react@^16.8.0 and react-dom@^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 react@^16.8.0 and react-dom@^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>;