Make your React apps multiplayer! This leverages Firebase to magically make a React component's state shared across multiple users.
Creating multiplayer 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.renderComponent(<App />, document.body);Next, let's make it multiplayer by adding two lines of code.
/** @jsx React.DOM */
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin, ReactMultiplayer.Mixin],
getInitialState: function() {
return {text: ''};
},
render: function() {
return <textarea valueLink={this.linkState('text')} />;
}
});
ReactMultiplayer.setFirebaseRoot('https://YOUR_ID_HERE.firebase.com/');
React.renderComponent(<App />, document.body);Bam. You're done.
If you want finer control over how state is shared (i.e. multiple chat rooms), override getFirebaseURL():
/** @jsx React.DOM */
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin, ReactMultiplayer.Mixin],
getInitialState: function() {
return {text: ''};
},
getFirebaseURL: function() {
return 'https://YOUR_ID_HERE.firebaseio.com/' + this.props.chatroom;
},
render: function() {
return <textarea valueLink={this.linkState('text')} />;
}
});
React.renderComponent(<App chatroom="mychat" />, document.body);