react-multiplayer

0.0.1 • Public • Published

react-multiplayer

Make your React apps multiplayer! This leverages Firebase to magically make a React component's state shared across multiple users.

Tutorial: multiplayer notepad

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.

Extra features

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);

Readme

Keywords

Package Sidebar

Install

npm i react-multiplayer

Weekly Downloads

0

Version

0.0.1

License

Apache 2

Last publish

Collaborators

  • floydophone