Multiplayer React using Firebase
npm install react-multiplayerMake 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:
``javascript
/* @jsx React.DOM /
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return {text: ''};
},
render: function() {
return ;
}
});
React.renderComponent(
`
Next, let's make it multiplayer by adding two lines of code.
`javascript
/* @jsx React.DOM /
var App = React.createClass({
mixins: [React.addons.LinkedStateMixin, ReactMultiplayer.Mixin],
getInitialState: function() {
return {text: ''};
},
render: function() {
return ;
}
});
ReactMultiplayer.setFirebaseRoot('https://YOUR_ID_HERE.firebase.com/');
React.renderComponent(
`
Bam. You're done.
If you want finer control over how state is shared (i.e. multiple chat rooms), override getFirebaseURL():
`javascript
/* @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 ;
}
});
React.renderComponent(
``