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'; { ; } { return <input = = /> ; }
In the above example, the super class BindingComponent
has the following members:
this.onChange
: the handler will update state, usually you pass this function toonChange
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, usuallythis
.bindStateType
: theFunction
to convert the value to the corresponding type, likeString
,Number
and etc.bindStateName
: the namespace for accessing frombindStateCtx.state
, which supports:name
: the direct accessparent.name
: the dot format
Then use your customized component as below:
Component { ; thisstate = name: null config: count: 0 ; } { return <TextInput = = ="name" /> <TextInput = = ="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.