Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cassiozen/React-autobind
Utility function to Automatically bind methods defined within a component's Class to the current object's lexical `this` instance.
https://github.com/cassiozen/React-autobind
Last synced: about 1 month ago
JSON representation
Utility function to Automatically bind methods defined within a component's Class to the current object's lexical `this` instance.
- Host: GitHub
- URL: https://github.com/cassiozen/React-autobind
- Owner: cassiozen
- License: mit
- Archived: true
- Created: 2016-01-23T08:57:56.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-11T06:50:13.000Z (over 5 years ago)
- Last Synced: 2024-11-11T17:49:49.763Z (about 1 month ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 189
- Watchers: 2
- Forks: 19
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Class autoBind
=====================
Automatically binds methods defined within a component's Class to the current object's lexical `this` instance (similarly to the default behavior of React.createClass).
### Description
React 0.13 introduced the possibility to define components using plain JavaScript ES6 classes. But differently from the traditional React.createClass, user defined methods in a ES6 class are not automatically bound.
Autobind is an utility function that can be called from the class constructor to bind the class methods to the component instance.
### Installation
To install the stable version:
```
npm install --save react-autobind
```
Then import it:
```javascript
import autoBind from 'react-autobind';
```
### Usage
You will generally call autoBind from the class constructor, passing the 'this' context:
```javascript
constructor(props) {
super(props);
autoBind(this);
}
```
Autobind is smart enough to avoid binding React related methods (such as render and lifecycle hooks).
You can also explicitly specify certain methods to exclude from binding:
```javascript
constructor(props) {
super(props);
autoBind(this, {
wontBind: ['leaveAlone1', 'leaveAlone2']
});
}
```
Or specify the only methods that should be auto-bound:
```javascript
constructor(props) {
super(props);
autoBind(this, {
bindOnly: ['myMethod1', 'myMethod2']
});
}
```
Naturally, `wontBind` and `bindOnly` cannot be used together.
### Example
```javascript
import React from 'react';
import {render} from 'react-dom';
import autoBind from 'react-autobind';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCounter: 0
}
autoBind(this);
}
increment() {
this.setState({
clickCounter: this.state.clickCounter + 1
});
}
// React's render and lifecycle hooks aren't bound
componentDidMount() {
console.log("Component is mounted.");
}
render(){
return (
Number of clicks: {this.state.clickCounter}
Increment Counter
);
}
}
render(, document.getElementById('root'));
```
### Similar Projects
React-autobind is similar (and forks some code from) [Autobind Decorator](https://github.com/andreypopp/autobind-decorator), with two main differences:
1. React-autobind is focused on React, and avoids binding React's Component methods such as `render` and lifecycle hooks.
2. React-autobind is a plain function call, while Autobind Decorator uses a more elegant but still not standardized JavaScript syntax that is subject to change in the future.