# react-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).

Latest version **1.0.6** (published 2016-01-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-autobind
pnpm add react-autobind
yarn add react-autobind
bun add react-autobind
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2016-01-23 |
| First published | 2016-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 187 |
| Author | Cássio M. Antonio |
| Maintainers | cassiozen |

## Links

- npm: https://www.npmjs.com/package/react-autobind
- Repository: https://github.com/cassiozen/React-autobind
- Homepage: https://github.com/cassiozen/React-autobind#readme
- Issues: https://github.com/cassiozen/React-autobind/issues
- npm.io page: https://npm.io/package/react-autobind

## Recent versions

- 1.0.6 (latest) — 2016-01-23
- 1.0.5 — 2016-01-23
- 1.0.0 — 2016-01-23

## 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
```

### Usage
You will generally call autoBind from the class constructor, passing the 'this' context:

```javascript
import autoBind from 'react-autobind';

constructor() {
  super();
  autoBind(this);
}
```

Autobind is smart enough to avoid binding React related methods (such as render and lifecycle hooks).

You can also explicitly specify which methods you want to bind:

```javascript
import autoBind from 'react-autobind';

constructor() {
  super();
  autoBind(this, 'myMethod1', 'myMethod2');
}
```

### Example

```javascript
import React from 'react';
import {render} from 'react-dom';
import autoBind from 'react-autobind';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      clickCounter: 0
    }
    autoBind(this);
  }

  componentDidMount() {
    console.log("Component is mounted");
  }

  increment() {
    this.setState({
      clickCounter: this.state.clickCounter + 1
    });
  }

  render(){
    return (
      <div>
        <h1>Number of clicks: {this.state.clickCounter}</h1>
        <button onClick={this.increment}>Increment Counter</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

```

---
_Source: https://npm.io/package/react-autobind · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._