Babel-plugin-react-scope-binding NPM

babel-plugin-react-scope-binding

Babel plugin for React component to make event handler auto binding to context.

Install

$ npm install babel-plugin-react-scope-binding --save-dev
# Or
$ yarn add babel-plugin-react-scope-binding --dev

Why?

When you are building a React component, you have to be careful about event handler. In component, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

Therefore, you have to bind the event handler in constructor method, like this,

class Header extends React.Component{
  constructor() {
    super()
    this.handleClick = this.handleClick.bind(this) // binding method
  }
  handleClick(e) {
    this.setSate({
      key: 'value'
    })
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    )
  }
}

Oh shit! It's so troublesome. So, this plugin is born to resolve these thorny problems. With this plugin, you can easily code without caring about context.

Instead,

class Header extends React.Component{
  constructor() {
    super()
    // needn't binding method
  }
  handleClick(e) {
    this.setSate({
      key: 'value'
    })
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    )
  }
}

Usage

Write via babelrc.

// .babelrc
{
  "plugins": [
    ["react-scope-binding", {
      "propPrefix": "on",
      "advanced": true
    }]
  ]
}

Options

Name	Type	Default	Description
propPrefix	String \| Array	'on'	Tell plugin what the JSX attributes need binding, default with 'on' prefix, e.g. onClick, onChange. You can also pass an Array to this option, such as 'on', '...'
advanced	Boolean	false	Enable advanced usage. In some situation, you want to pass value to event handler. With this option enabled, you can easily write a code such as `<div onClick={this.handleClick(item)}></div>`. Plugin will auto transpile it to `<div onClick={(e) => {this.handleClick(e, item)}></div>`