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:

``javascript
/* @jsx React.DOM /

var App = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {text: ''};
},
render: function() {
return ;<br /> }<br />});</p><p class="my-3">React.render(<App />, document.body);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Next, let's make it sync between clients by adding two lines of code.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />/<em>* @jsx React.DOM </em>/</p><p class="my-3">ReactWebRTCSync.initSkylink('Your Skylink App Key', 'room name');</p><p class="my-3">var App = React.createClass({<br /> mixins: [React.addons.LinkedStateMixin, ReactWebRTCSync.Mixin],<br /> getInitialState: function() {<br /> return {text: ''};<br /> },<br /> render: function() {<br /> return <textarea valueLink={this.linkState('text')} />;<br /> }<br />});</p><p class="my-3">React.render(<App />, document.body);<br /></code>``</p><p class="my-3">And you're in sync. :)</p><p class="my-3"><br />Big thanks to <a href="https://github.com/petehunt/react-multiplayer" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pete Hunt</a> for his awesome work on React and react-multiplayer to get me started!<br />License is Apache 2.0<br /></p></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>