react-link-state

react-link-state

A helper function to use LinkedStateMixin for ES6 React Components.

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

Installing

npm install react-link-state --save

Usage

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

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

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

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

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')} />

Testing

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.