babel-plugin-react-binding
Two way binding sugar for React.
Usage
install
npm i babel-plugin-react-binding --save-dev
react-binding
to .babelrc
add "plugins": "react-binding" // options
use binding in React JSX!
<div> <input binding=thisstateinputValue> <Dialog binding=thisstatedialogOpen></div>
binding to redux example
Component { return <input id='input' binding=thispropsinput /> } stateform { } App
Principle
react-binding
will automatically add value
and onChange
props to React Element. After the event triggered, react-binding
will receive the new value, and execute setState()
to update the value.
You can think of it as (if you write by hand):
<input value=thisstateinputValue onChange= this>
Options
Use babel option to custom the prop name (default binding
)
Then the jsx code may be like:
<input bindModel=thisstateinputValue>
Custom Component
By default, react-binding
use value
and onChange
as default prop names for two-way binding (except radio and checkbox, they use checked
). But some custom component may use another prop name, for example onInput
.
Use static property bindingDescriptor
for adaptation.
CustomComponentbindingDescriptor = prop: 'number' event: 'onInput'