babel-plugin-react-scope-binding
Babel plugin for React component to take event handler to bind context automatically.
Installation
$ npm install babel-plugin-react-scope-binding --save-devMotivation
When you are building a React component, you have to be careful about event handler. In component, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
Therefore, you have to bind the event handler in constructor method, like this,
class Header extends React.Component{
constructor() {
super()
this.handleClick = this.handleClick.bind(this) // binding method
}
handleClick(e) {
this.setSate({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}Oh shit! It's so troublesome. So, this plugin is born to resolve these thorny problems. With this plugin, you can easily code without caring about context.
Instead,
class Header extends React.Component{
constructor() {
super()
// needn't binding method
}
handleClick(e) {
this.setSate({
key: 'value'
})
}
render() {
return (
<div onClick={this.handleClick}></div>
)
}
}Usage
Write via babelrc.
// .babelrc
{
"plugins": [
["react-scope-binding", {
"propPrefix": "on",
"advanced": true
}]
]
}
Options
| Name | Type | Default | Description |
|---|---|---|---|
| propPrefix | String | Array | 'on' | Tell plugin what the JSX attributes need binding, default with 'on' prefix, e.g. onClick, onChange. You can also pass an Array to this option, such as ['on', '...'] |
| advanced | Boolean | false | Enable advanced usage. In some situation, you want to pass value to event handler. With this option enabled, you can easily write a code such as <div onClick={this.handleClick(item)}></div>. Plugin will auto transpile it to <div onClick={(e) => {this.handleClick(e, item)}></div> |
Links
https://chikara-chan.github.io/babel-plugin-react-scope-binding/
License
Released under the MIT license.