https://github.com/harshwardhansingh/autobinder
Babel Plugin for auto binding your component/class methods in class constructor.
https://github.com/harshwardhansingh/autobinder
babel babel-plugin es6-javascript javascript
Last synced: 10 days ago
JSON representation
Babel Plugin for auto binding your component/class methods in class constructor.
- Host: GitHub
- URL: https://github.com/harshwardhansingh/autobinder
- Owner: HarshwardhanSingh
- License: mit
- Created: 2017-12-24T08:28:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-20T14:21:11.000Z (over 7 years ago)
- Last Synced: 2025-06-08T10:11:27.754Z (13 days ago)
- Topics: babel, babel-plugin, es6-javascript, javascript
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-auto-binder
[](https://codeclimate.com/github/HarshwardhanSingh/autobinder/maintainability)
## Inspiration:
Every time I write a new component method I have to bind in the constructor so that it can access `this`.
Example:
`this.doStuff = this.doStuff.bind(this);`
Now if you forget to bind your method, you will face very weird bugs which can be frustating. `babel-plugin-auto-binder` will take care of this issue by doing this binding behind the scene so you just worry about the functionality.
If you are using or prefer using arrow functions then you don't need this plugin as the arrow function have the `this` context from the scope they are declared in.
## Performance:
This plugin binds your class methods (does not binds react lifecycle methods in React) only once in constructor which is a big performance plus.
## Getting Started
### Setting up
1. `npm i -D babel-plugin-auto-binder`
2. `npm i -D babel-plugin-transform-decorators-legacy`
3. Update your `.babelrc` configuration by adding
```
{
"plugins" : [
"auto-binder",
"transform-decorators-legacy",
]
}
```
### Usage
Decorate your class with `@autobind` decorator like this:
```
@autobind
class App extends Component {
constructor() {
super();
}
doStuff() {
//some api calls
}
render() {
return (
)
}
}
```
and that's it!!
The above input will get transformed to
```
class App extends Component {
constructor() {
super();
this.doStuff = this.doStuff.bind(this);
}
doStuff() {
//some api calls
}
render() {
return (
)
}
}
```