react-auto-binder

🚀 Auto bind custom methods of your React components

ReactAutoBinder is a higher order component that bind this to all custom methods on your React components.

Install

NPM

$ npm install react-auto-binder --save

Yarn

$ yarn add react-auto-binder

Usage

Example 1:

import React from 'react'
import ReactAutoBinder from 'react-auto-binder'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      text: 'default'
    }
  }

  handler() {
    this.setState({ text: this.refs.input.value })
  }

  render() {
    return (
      <div>
        <input type="text" ref="input" onChange={this.handler}/>
        <h1>{this.state.text}</h1>
      </div>
    )
  }
}

export default ReactAutoBinder(App)

Example 2:

import React from 'react'
import ReactAutoBinder from 'react-auto-binder'

const App = ReactAutoBinder(
  class extends React.Component {
    constructor() {
      super()
      this.state = {
        text: 'default'
      }
    }

    handler() {
      this.setState({ text: this.refs.input.value })
    }

    render() {
      return (
        <div>
          <input type="text" ref="input" onChange={this.handler}/>
          <h1>{this.state.text}</h1>
        </div>
      )
    }
  }
)

export default App

License

MIT © Helton Carlos de Souza