autobindr

    1.0.6 • Public • Published

    autobindr

    Look ma, no bind!

    Build Status npm Codecov branch

    The fast, easy and convenient way to automatically bind "class" methods to the instance.

    Go from this

    <button onClick={this.onButtonClick.bind(this)}>click</button>

    to this

    <button onClick={this.onButtonClick}>click</button>
     

    With simple

    autobind(this);

    autobind should be called from within the class constructor function, passing this as an argument.

    While this package was developed with React in mind, it works the same way with vanilla JS classes or any other JS framework utilizing classes.

    It will skip all React lifecycle methods

    Installation

    npm install --save autobindr
    

    This assumes that you’re using npm package manager with a module bundler like Webpack, Rollup or Browserify to consume CommonJS modules.

    If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes autobind function available as a global. You can grab the latest version from unpkg CDN here, or production-ready minified version(<1kb) - here and drop script tag right into your HTML, although I don't recommend you to do so.

    Importing

    ES6 modules

    import autobind from 'autobindr';

    CommonJS

    var autobind = require('autobindr');

    UMD

    var autobind = window.autobind;

    API

    autobind(context, [options])

    Automatically binds "class" methods to provided context(usually lexical this). To be called in constructor.

    constructor () {
      super();
      autobind(this);
    }

    options: {only: Array<string>, skip: Array<string>, pattern: RegExp}

    • only: Array<string> - Array of method names, if provided, only this methods will be bound to the context
    // bind only "onButtonClick" and "onFormSubmit" methods
    autobind(this, {only: ['onButtonClick', 'onFormSubmit']})
    • skip: Array<string> - Array of method names, if provided, this methods will be skipped(not bound to the context)
    // do not bind "onFormSubmit" method
    autobind(this, {skip: ['onFormSubmit']})
    • pattern: RegExp - if provided, regex will be executed on each method name
    // bind all methods starting with "handle" (handleClick, handleFormSubmit, handleDelete, etc.)
    autobind(this, {pattern: /^handle/})

    Example

    import autobind from 'autobindr';
     
    class Counter extends React.Component {
     
      constructor () {
        super();
        this.state = {
          counter: 0
        };
        autobind(this);
      }
     
      onButtonClick () {
        this.setState(state => ({counter: state.counter + 1}));
      }
     
      render () {
        return (
          <div class="counter">
            {this.state.counter}
            <button onClick={this.onButtonClick}>Inc</button>
          </div>
        );
      }
    }
     
    ReactDOM.render(<Counter />, document.body);

    License

    MIT

    Install

    npm i autobindr

    DownloadsWeekly Downloads

    3

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • husa