React callback props decorator

A non-parametrized method decorator which wraps original handlers with similar-name callback invoke. This is particularly useful for situations like React components, where you often pass callbacks as props and you have to invoke them explicitly.

// Before:
class Component extends React.Component {
    handleSomething(args) {
        // do some useful work
        if (this.props.onSomething) {
            this.props.onSomething(args);
        }
    }
}

// After:
class Component extends React.Component {
    @callback
    handleSomething(args) { // camelCaseName
        // do some useful work
    }
}

A parametrized method decorator invokes callback with specified name.

// Before:
class Component extends React.Component {
    handleSomething(args) {
        // do some useful work
        if (this.props.onAnything) {
            this.props.onAnything(args);
        }
    }
}

// After:
class Component extends React.Component {
    @callback('onAnything')
    handleSomething(args) { // camelCaseName
        // do some useful work
    }
}

Or you can parametrize your callback with value-converting function.

// Before:
class Component extends React.Component {
    handleSomething(args) {
        // do some useful work
        if (this.props.onSomething) {
            this.props.onSomething(args.inner);
        }
    }
}

// After:
class Component extends React.Component {
    @callback(args => args.inner)
    handleSomething(args) { // camelCaseName
        // do some useful work
    }
}

Or you can use both parameters.

// Before:
class Component extends React.Component {
    handleSomething(args) {
        // do some useful work
        if (this.props.onAnything) {
            this.props.onAnything(args.inner);
        }
    }
}

// After:
class Component extends React.Component {
    @callback('onAnything', args => args.inner)
    handleSomething(args) { // camelCaseName
        // do some useful work
    }
}

But please, DO NOT overuse converting function parameter. It is just a helper for elementary cases.

Pay attention: for now decorators can be used with transpilers such as Babel

To Babel 6 users: For now decorators syntax is not final. So you may use babel-plugin-transform-decorators-legacy.

To autobind-decorator users: Make sure you apply callback before autobind-decorator as it returns accessor descriptor.

Example:

// Bad:
@callback
@autobind
handleSomething() { ... }

// Good:
@autobind
@callback
handleSomething() { ... }

Installation:

% npm install react-callback-props-decorator

Example:

import callback from 'react-callback-props-decorator'

class Component {
  render() {
    return <div onClick={ this.handleClick } />;
  }

  @callback
  handleClick() {
    // do useful work here
  }
}

nik-kor/react-callback-props-decorator

React callback props decorator