Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-class

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-class

A carefully crafted base class for all your React components

  • 3.1.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-class

A carefully crafted base class for all 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

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
  }
}

## Just auto-binding

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

import autoBind from 'react-class/autoBind'

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

    autoBind(this)
  }

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

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

Keywords

FAQs

Package last updated on 14 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc