srph/react-link-state

A helper util to use LinkedStateMixin for ES6 React Components

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.

react-link-state's Issues

bug: input not editable when linkState used with default value

In following situation everything works smooth:

export default class SomeComponent extends React.Component {
  state = {
    phoneNumber: null
  }
  render() {
    return <input tyle="text" valueLink={linkState(this, 'phoneNumber')} />
  }
}

But in case when I have default value, input is not editable anymore:

export default class SomeComponent extends React.Component {
  state = {
    phoneNumber: '+48'
  }
  render() {
    return <input tyle="text" valueLink={linkState(this, 'phoneNumber')} />
  }
}

Multiple key levels?

For example:

<input type="text" valueLink={linkState(this, 'user[0].login')} />

No "repository" in package.json

It was hard to find github repository from https://www.npmjs.com/package/react-link-state

how about passing as prop?

this is is hou

export default class Create extends React.Component{
    constructor(){
        super();
        this.state = {
            items: {
                firstName:'',
                lastName: '',
                address: {
                    address1:'',
                    address2:''
                }
            }
        };
    }
    render(){ 
        return(
            <div class="row">
                <Form states = {linkstate} /> 
            </div>
        )
    }
}

how could I access it in Form component?