react-linkstate-decorator

react-linkstate-decorator

Enables two way binding on decorated components via linkState and valueLink.

Installation

Run <npm install --save react-linkstate-decorator> and then use the default export of the module.

Purpose

This will allow two way data flow between decorated components via linkState and valueLink. This will assign a createlinkState method to the component's linkState attribute for easy use. For more information about linkState and the valueLink property, please visit [https://facebook.github.io/react/docs/two-way-binding-helpers.html] (https://facebook.github.io/react/docs/two-way-binding-helpers.html).

Example

Using the decorator, you can enable a two way binding via valueLink and linkState between a parent and child component.

import LinkState from 'react-linkstate-decorator';

class ChildComponent extends Component {
  render() {
    return (
      <div>{this.props.valueLink.value}</div>
    );
  }
}

@LinkState
class ParentComponent extends Component {
  constructor() {
    super();
    this.state = {
      val: 1
    };
  }

  render() {
    return (
      <ChildComponent valueLink={this.linkState('val')}/>
    );
  }
}