https://github.com/meowtec/babel-plugin-react-binding
Two way binding sugar for React
https://github.com/meowtec/babel-plugin-react-binding
babel react twoway
Last synced: 9 months ago
JSON representation
Two way binding sugar for React
- Host: GitHub
- URL: https://github.com/meowtec/babel-plugin-react-binding
- Owner: meowtec
- License: mit
- Created: 2017-09-23T15:26:30.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-30T17:40:56.000Z (about 8 years ago)
- Last Synced: 2025-03-22T06:02:12.041Z (9 months ago)
- Topics: babel, react, twoway
- Language: JavaScript
- Homepage:
- Size: 72.3 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-binding
Two way binding sugar for React.
## Usage
#### install
```
npm i babel-plugin-react-binding --save-dev
```
#### add `react-binding` to `.babelrc`
```js
{
"plugins": [
["react-binding", {
// options
}]
]
}
```
#### use binding in React JSX!
```javascript
```
#### binding to redux example
```javascript
class App extends React.Component {
render () {
return (
)
}
}
export default connect(
state => state.form,
dispatch => ({
onChange (value, key) {
dispatch({
type: 'UPDATE_FORM',
key,
value,
})
},
})
)(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):
```javascript
this.setState({ inputValue: e.target.value })}
>
```
## Options
Use babel option to custom the prop name (default `binding`)
```json
{
"plugins": [
["react-binding", {
"attrName": "bindModel"
}]
]
}
```
Then the jsx code may be like:
```javascript
```
## 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.
```javascript
CustomComponent.bindingDescriptor = {
prop: 'number',
event: 'onInput',
}
```