react-lensed-state

Adds react opportunity to work with the state in a hierarchical notation, for example this.linkState ('model.user.name') will point to the part of the object state. Work of lens are immutable, that is, after changing the value will create a new state object.

Example

var LensedExample = React.createClass({
  
      mixins : [LensedStateMixin],
 
      getInitialState : {
          model : {
              user : {
                  name: "John",
                  email: "john@example.com"
              },
              notify : {
                  email : true,
                  fb: false
              }
          }
      },
 
      render: function() {
          return (
              <form>
                  <input valueLink={this.linkState('model.user.name')} type="text" name="user-name" />
                  <input valueLink={this.linkState('model.user.email')} type="text" name="user-email" />
                  <input valueLink={this.linkState('model.notify.email')} type="checkbox" name="notify-email" />
                  <input valueLink={this.linkState('model.notify.fb')} type="checkbox" name="notify-fb" />
             </form>
          );
      }
  });

Installing

The easiest way is to grab it from NPM. If you're running in a Browser environment, you can use [Browserify][]

$ npm install react-lensed-state