Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

react-webrtc-sync

0.0.2 • Public • Published

react-webrtc-sync

Make your React apps render on multiple clients via WebRTC! This leverages Skylink to magically make a React component's state shared across multiple clients.

Tutorial: Synced notepad

Creating the synced notepad is very simple. First, create a simple controlled textarea, just like you would with any form in React. We'll use React's two-way binding helpers to save us some typing:

/** @jsx React.DOM */
 
var App = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {text: ''};
  },
  render: function() {
    return <textarea valueLink={this.linkState('text')} />;
  }
});
 
React.render(<App />, document.body);

Next, let's make it sync between clients by adding two lines of code.

/** @jsx React.DOM */
 
ReactWebRTCSync.initSkylink('Your Skylink App Key', 'room name');
 
var App = React.createClass({
  mixins: [React.addons.LinkedStateMixin, ReactWebRTCSync.Mixin],
  getInitialState: function() {
    return {text: ''};
  },
  render: function() {
    return <textarea valueLink={this.linkState('text')} />;
  }
});
 
React.render(<App />, document.body);

And you're in sync. :)

Big thanks to Pete Hunt for his awesome work on React and react-multiplayer to get me started! License is Apache 2.0

install

npm i react-webrtc-sync

Downloadsweekly downloads

2

version

0.0.2

license

Apache 2

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability