react-class
Smart Auto-Binding for your React components.
Features
- auto-bind methods
- optimized to only auto-bind non-lifecycle methods
Install
$ npm install react-class --save
Usage
Instead of extending React.Component
you have to extend the class exported by react-class
.
import Component from 'react-class'// or import { Component } from 'react-class { return <div => //onClick is auto-bound to "this", so you can keep your code dry </div> } { console // 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.
import autoBind from 'react-class/autoBind' // or import autoBind from 'react-class' // or var autoBind =
After importing/require-ing it, call autoBind
in the component constructor:
import autoBind from 'react-class/autoBind' Component { } { // ... 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 inobj
are bound to the object for which thefilterFn
returns trueautoBind(obj, skipObject)
- the methods whose names are found in theskipObject
as truthy are skipped from autobinding. Eg:autoBind(obj, { notBound: true, log: true })
will not bind theobj.notBound
andobj.log
methods to theobj
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!