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

Readme

Keywords

Package Sidebar

Install

npm i react-webrtc-sync

Weekly Downloads

2

Version

0.0.2

License

Apache 2

Last publish

Collaborators

  • serrynaimo