Mixin provided ReactLink with lensed attributes

Usage no npm install needed!

<script type="module">
  import reactLensedState from '';


Build Status NPM version Dependencies Status experimental


Adds react opportunity to work with the state in a hierarchical notation, for example this.linkState ('') 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: ""
              notify : {
                  email : true,
                  fb: false
      render: function() {
          return (
                  <input valueLink={this.linkState('')} type="text" name="user-name" />
                  <input valueLink={this.linkState('')} type="text" name="user-email" />
                  <input valueLink={this.linkState('')} type="checkbox" name="notify-email" />
                  <input valueLink={this.linkState('model.notify.fb')} type="checkbox" name="notify-fb" />


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