react-link-state

react-link-state copied to clipboard

react-link-state

A helper function to use LinkedStateMixin for ES6 React Components.

Removal of valueLink

valueLink has been removed from React starting on v16. Still, this projects works just fine for older versions.

If you'd like to future-proof your application, check out @developit's linkstate.

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.