• Stars
    star
    197
  • Rank 193,133 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Send data to someone else's browser as easy as setting state

react-peer

Build Status npm npm bundle size (minified + gzip) Dev Dependencies Dev Dependencies Dev Dependencies

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>;

More Repositories

1

typescript-transformer-handbook

📘 A comprehensive handbook on how to create transformers for TypeScript with code examples
TypeScript
870
star
2

element-motion

Tween between view states with declarative zero configuration element motions for React
TypeScript
811
star
3

awesome-typescript-ecosystem

😎 A list of awesome TypeScript transformers, plugins, handbooks, etc
116
star
4

armory-app

🛡 Guild Wars 2 Armory | gw2armory.com
JavaScript
72
star
5

react-sticky-header

🍯 A sticky header for React.js
JavaScript
54
star
6

armory-embeds

🛡 Embed Guild Wars 2 widgets on your site!
JavaScript
44
star
7

vite_plugin_deno_resolve

A plugin for Vite that resolves modules with Deno.
TypeScript
15
star
8

douges.dev

An interactive blog focusing on web & game dev. Written by Michael Dougall.
TypeScript
14
star
9

armory-component-ui

🛡 Common components and features for GW2Armory and GW2AEmbeds.
JavaScript
12
star
10

react-best-modal

Simple is best. Accessible out of the box, tiny api, bring your own styles.
TypeScript
11
star
11

armory-services

🛡 Guild Wars 2 Armory Services | api.gw2armory.com
JavaScript
9
star
12

armory-ng

🛡 Guild Wars 2 Armory Legacy AngularJS Build
JavaScript
8
star
13

ts-transform-define

Create global constants which can be configured at compile time using the TypeScript compiler.
TypeScript
7
star
14

deno_changesets

A Deno native way to manage versioning and changelogs.
TypeScript
6
star
15

gotta-validate

An async object validator for node.
JavaScript
6
star
16

react-connect-the-dots

⭕ Dynamically positions a component between two elements, for React.js
JavaScript
5
star
17

TRIPLEX

What's this?
TypeScript
2
star
18

react-scroll-paginator

📃 A lightweight scroll based paginator for ReactJS. Opt out defer pagination until a user clicks a button!
JavaScript
2
star
19

react-debounce-decorator

⛹ Useful for debouncing tooltips or anything you want to happen immediately, and be called back after a while.
JavaScript
2
star
20

html5.2-cheat-sheet

Collection of HTML examples that are relevant in HTML5.2
1
star
21

react-mouse-follow

React Mouse Follow to make a react element follow the mouse.
JavaScript
1
star
22

react-suspense-patterns

An example implementation of various React Suspense patterns.
JavaScript
1
star
23

function-batch

📦 Higher order function that will batch all calls to the wrapped function over a time period, and then call the wrapped function once with all args.
JavaScript
1
star
24

json2tds

Proof of concept hackathon project to generate sitecore tds flat files from json
JavaScript
1
star
25

react-material-transitions-prototype

A material design transition prototyped with react.
JavaScript
1
star
26

live-retro

📚 Streamlining agile retrospectives in realtime | https://bit.do/9retro
JavaScript
1
star
27

gw2-item-stats-api

Api to get access to rich item stats via the gw2 api [MANUALLY DEPLOYED TO AWS]
JavaScript
1
star
28

feeds-hackathon

Simple crud hackathon app for suggestion based cooking productivity.
JavaScript
1
star
29

react-scroll-store

📜 Stores scroll position on unmount and sets it back when the component is re-mounted.
JavaScript
1
star