Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chikara-chan/babel-plugin-react-scope-binding
🍖 Babel plugin for React component to take event handler to bind context automatically.
https://github.com/chikara-chan/babel-plugin-react-scope-binding
babel babel-plugin
Last synced: about 1 month ago
JSON representation
🍖 Babel plugin for React component to take event handler to bind context automatically.
- Host: GitHub
- URL: https://github.com/chikara-chan/babel-plugin-react-scope-binding
- Owner: chikara-chan
- License: mit
- Created: 2017-02-23T07:56:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-26T06:22:59.000Z (over 6 years ago)
- Last Synced: 2024-12-01T11:43:56.748Z (about 2 months ago)
- Topics: babel, babel-plugin
- Language: JavaScript
- Homepage: https://chikara-chan.github.io/babel-plugin-react-scope-binding/
- Size: 95.7 KB
- Stars: 21
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-scope-binding
Babel plugin for React component to take event handler to bind context automatically.
[](https://travis-ci.org/chikara-chan/babel-plugin-react-scope-binding)
[](https://www.npmjs.com/package/babel-plugin-react-scope-binding)
[](https://github.com/chikara-chan/babel-plugin-react-scope-binding/blob/master/LICENSE)
## Installation
```bash
$ npm install babel-plugin-react-scope-binding --save-dev
```
## Motivation
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,
``` jsx
class Header extends React.Component{
constructor() {
super()
this.handleClick = this.handleClick.bind(this) // binding method
}
handleClick(e) {
this.setSate({
key: 'value'
})
}
render() {
return (
)
}
}
```
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,
``` jsx
class Header extends React.Component{
constructor() {
super()
// needn't binding method
}
handleClick(e) {
this.setSate({
key: 'value'
})
}
render() {
return (
)
}
}
```
## Usage
Write via [babelrc](https://babeljs.io/docs/usage/babelrc/).
``` json
// .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 `
`. Plugin will auto transpile it to ` {this.handleClick(e, item)}>`
## Links
[https://chikara-chan.github.io/babel-plugin-react-scope-binding/](https://chikara-chan.github.io/babel-plugin-react-scope-binding/)
## License
Released under the [MIT](https://github.com/chikara-chan/babel-plugin-react-scope-binding/blob/master/LICENSE) license.