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.
var LensedExample = React.createClass({
mixins : [LensedStateMixin],
getInitialState : {
model : {
user : {
name: "John",
email: "[email protected]"
},
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>
);
}
});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
