react-class/README.md

A carefully crafted base class for all your React components

# react-class

> Smart Auto-Binding for your React components.

## Features

 * auto-bind methods
 * optimized to only auto-bind non-lifecycle methods

## Install

```sh
$ npm install react-class --save
```

## Usage

Instead of extending `React.Component` you have to extend the class exported by `react-class`.

```jsx
import Component from 'react-class'
// or import { Component } from 'react-class

class MyApp extends Component {
  render() {
    return <div {...props} onClick={this.onClick}>
      //onClick is auto-bound to "this", so you can keep your code dry
    </div>
  }

  onClick(){
    console.log(this)
    // this is correctly bound to the component instance
  }
}
```

## `autoBind` only

If you don't want to extend the class exported by `react-class` and instead just want autobinding, you can just import the `autoBind` function directly.

```jsx
import autoBind from 'react-class/autoBind'

// or

import { autoBind } from 'react-class'

// or

var autoBind = require('react-class/autoBind')
````

After importing/require-ing it, call `autoBind` in the component constructor:

```jsx
import autoBind from 'react-class/autoBind'

class MyApp extends React.Component {
  constructor(props) {
    super(props)

    autoBind(this)
  }

  render() {
    // ... your rendering logic
  }
}
```

### autoBind filtering

`autoBind` supports a second param, that can be used to filter what gets auto-binding or not. It can be a function or an object.

 * `autoBind(obj, filterFn)` - only those methods in `obj` are bound to the object for which the `filterFn` returns true
 * `autoBind(obj, skipObject)` - the methods whose names are found in the `skipObject` as truthy are skipped from autobinding. Eg: `autoBind(obj, { notBound: true, log: true })` will not bind the `obj.notBound` and `obj.log` methods to the `obj` object. 

## FAQ

### What problems does it solve?

Autobinding, which is a nice-to-have feature!

### What if I want to remove it in the future?

`react-class` is a very thin layer around `React.Component`, so just in case you decide removing it in the future, you'll be safe and will only have to do very minor code changes.

We're not doing anything magical!


## LICENSE

#### MIT