react-binding-component

A react component for data-binding, which makes writing form widget such easy.

Usage

Extends your component by BindingComponent:

import { BindingComponent } from 'react-binding-component';

class TextInput extends BindingComponent {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <input 
        onChange={this.onChange.bind(this)} 
        value={this.bindStateValue} 
      />
    );
  }
}

In the above example, the super class BindingComponent has the following members:

• this.onChange: the handler will update state, usually you pass this function to onChange event of form widgets.
• this.bindStateValue: this is a getter and setter.
  • getter: access to the binding state.
  • setter: update value to the binding state.

And we will have the following props in the component TextInput:

• bindStateCtx: the context of state that you expect to bind on, usually this.
• bindStateType: the Function to convert the value to the corresponding type, like String, Number and etc.
• bindStateName: the namespace for accessing from bindStateCtx.state, which supports:
  • name: the direct access
  • parent.name: the dot format

Then use your customized component as below:

class ExampleView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: null,
      config: {
        count: 0
      }
    };
  }
  render() {
    return [
      <TextInput bindStateCtx={this}
        bindStateType={String}
        bindStateName="name" 
      />,
      <TextInput bindStateCtx={this}
        bindStateType={Number}
        bindStateName="config.count" 
      />
    ];
  }
}

What's the different from rsamec/react-binding?

If you have experience on data-binding in react community, you will get known about this light-weight library. But I would say react-binding-component is more light-weight, and it's more for writing data-binding integrated UI widget, not for adding the data-binding feature on a native component.

Installation

$ npm install react-binding-component --save

License

MIT @ WeFlex, Inc.