A helper util to use LinkedStateMixin for ES6

Usage no npm install needed!

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


react-link-state npm version Build Status

A helper function to use LinkedStateMixin for ES6 React Components.

Note: This might be deprecated soon as there are plans to deprecate ReactLink (#2302).


npm install react-link-state --save


import React from 'react';
import linkState from 'react-link-state';

export default MyForm extends React.Component {
  constructor(props) {

    this.state = {
      username: '',
      password: '',
      toggle: false

  render() {
    return (
        <input type="text" valueLink={linkState(this, 'username')} />
        <input type="password" valueLink={linkState(this, 'password')} />
        <input type="checkbox" checkedLink={linkState(this, 'toggle')}

Note: Use checkedLink for checkboxes.

Deep link-state is also supported!

// Given that we have this state:
// {
//   users: [{
//     profile: {
//       first_name: ''
//     }
//   }]
// }
<input type="text" valueLink={linkState(this, 'users.0.profile.first_name')} />


npm test

You need node v4.0.0 to runs the tests. See issue.

You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.