mrp

meteor-react-prebind

Allows easy 'this' binding of all React methods (except lifecycle methods) a la classic React.createClass

Showing:

Popularity

Downloads/wk

0

GitHub Stars

6

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Meteor/React Pre-Bind

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

NOTE: Though this is branded as a Meteor package, it can safely be used with regular React projects.

Description

As you probably know, React ES6 class methods are not automatically bound to this in the same way that they are when using the classic React.createClass method. This led many people to bind their methods at the time of passing them as props, e.g.:

<div onClick={this.doSomething.bind(this)} />

But, in some situations, this can be problematic as someFunc.bind(this) !== someFunc.bind(this), and you may experience needless re-rendering.

The solution is to "pre-bind" your class methods:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.method1 = this.method1.bind(this);
    this.method2 = this.method2.bind(this);
    // etc
  }
  // ...

Of course, this can become tedious, so it makes sense to have a single function to handle this for you.

Installation

To install the stable version:

npm install --save meteor-react-prebind

Then import it:

import prebind from 'meteor-react-autobind';

Usage

You will generally call prebind from the class constructor, passing the this context:

constructor(props) {
  super(props);
  prebind(this);
}

Prebind 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:

constructor(props) {
  super(props);
  prebind(this, {
    wontBind: ['leaveAlone1', 'leaveAlone2']
  });
}

Or specify the only methods that should be auto-bound:

constructor(props) {
  super(props);
  prebind(this, {
    bindOnly: ['myMethod1', 'myMethod2']
  });
}

Naturally, wontBind and bindOnly cannot be used together.

Example

import React, { Component } from 'react';
import prebind from 'meteor-react-autobind';

class Clicker extends Component {
  constructor(props) {
    super(props);

    prebind(this);
    this.state = {
      clickCounter: 0,
    };
  }

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

  // React's render and lifecycle hooks aren't bound

  componentDidMount() {
    console.info('Component is mounted.');
  }

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

Prior Art

Thanks to Cássio Souza for react-autobind, of which this project is a fork.

Why Fork?

react-autobind worked well for the most part, except that when using higher-order functions (such as Radium) with Meteor/React, I noticed methods bound with autobind would stop working in production. There's something with Meteor's production build process, in combination with higher-order functions, that wraps the React class too deeply for autobind to find it. This package addresses that issue.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial