autobind decorator

A class or method decorator which binds methods to the instance so this is always correct, even when the method is detached.

This is particularly useful for situations like React components, where you often pass methods as event handlers and would otherwise need to .bind(this).

// Before:
<button onClick={ this.handleClick.bind(this) }></button>

// After:
<button onClick={ this.handleClick }></button>

As decorators are a part of future ECMAScript standard they can only be used with transpilers such as Babel.

Installation

npm install autobind-decorator

Supported platforms

Output

We target IE11+ browsers (see out browserslist) with the following caveats:

main: ES5

module: ES5 + ES modules to enable tree shaking

es: modern JS

On consuming modern JS, you can transpile the script to your target environment (@babel/preset-env is recommended) to minimise the cost. For more details, please read https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages.

Dev

node 8.10+ with latest npm

Babel 6 users (legacy only)

The implementation of the decorator transform is currently on hold as the syntax is not final. If you would like to use this project with Babel 6, you may use babel-plugin-transform-decorators-legacy which implement Babel 5 decorator transform for Babel 6.

Babel 7 users

Legacy

Babel 7's @babel/plugin-proposal-decorators officially supports the same logic that babel-plugin-transform-decorators-legacy has, but integrates better with Babel 7's other plugins. You can enable this with