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