react-component-with-partials

Partials for your react components callbacks. Because having .bind and arrow functions in your react components is an antipattern.

Get it

npm install --save react-component-with-partials

Usage

Wrap your component with withPartials and it will inject the partial prop, which can be used exactly like lodash.partial. You can either wrap it by hand or use it as a es7 decorator:

import React, { Component } from 'react';
import withPartials from 'react-component-with-partials';

@withPartials
class MyComponent extends Component {
  render() {
    const { partial } = this.props;
    return(
      <div>
        <div onClick={partial(this.handler, "yellow")}>
          Click for yellow!
        </div>
        <div onClick={partial(this.handler, "blue")}>
          Click for blue!
        </div>
      </div>
    );
  }

  handler(color) {
    window.alert(`You clicked ${color}`);
  }
}

How it works

This library exposes a high order component which passes down partial as a prop. partial maintains an internal cache of your partial'd functions, instead of creating a new partial function on every render, forcing re-renders downstream every time. Using this with PureComponent may yield help performance by avoiding unnecessary GC in your app. YMMV.