# react-class

> A carefully crafted base class for all your React components

Latest version **3.2.2** (published 2016-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-class
pnpm add react-class
yarn add react-class
bun add react-class
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.2 |
| Published | 2016-08-09 |
| First published | 2015-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Zippy Technologies |
| Maintainers | zippyui |
| Keywords | react, class, component, react-component, base, bind |

## Links

- npm: https://www.npmjs.com/package/react-class
- Repository: https://github.com/zippyui/react-class
- Issues: https://github.com/zippyui/react-class/issues
- npm.io page: https://npm.io/package/react-class

## Dependencies (1)

- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.2.2 (latest) — 2016-08-09
- 3.2.0 — 2016-08-05
- 3.1.4 — 2016-07-22
- 3.1.3 — 2016-07-15
- 3.1.2 — 2016-07-14
- 3.1.1 — 2016-07-14
- 3.1.0 — 2016-07-14
- 3.0.1 — 2016-07-13
- 3.0.0 — 2016-07-13
- 2.1.0 — 2016-05-26
- 2.0.0 — 2016-01-13
- 1.2.4 — 2015-11-11
- 1.2.3 — 2015-11-11
- 1.2.2 — 2015-09-15
- 1.2.0 — 2015-09-05
- … 3 more at https://npm.io/package/react-class/versions

## README

# 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

---
_Source: https://npm.io/package/react-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._