React Callbacks

A React HOC that generates and injects parameterized callbacks to its children, avoiding the need for creating anonymous functions inside the render method.

Installation

yarn add react-callbacks

Usage

import * as React from 'react';
import Callbacks from 'react-callbacks';

const onClick = (id, event) => {
  console.log(`Button of value ${id} was clicked!`);
}

class Page extends React.Component {
  render() {
    return (
      <div>
      {
        [1,2,3,4,5].map(value => (
          <Callbacks
            key={value}
            callbacks={[{ context: this, fn: onClick, args: [value], to: 'onClick' }]}
          >
            <button />
          </Callbacks>
        ))
      }
      </div>
    );
  }
}

API

Prop	Type	Required	Description
callbacks	Callback[]	Required	a list of callbacks to pass to the underlying children
onInject	Function	Optional	a method that accepts injected props of type Injection as an argument

Callback

Prop	Description
context	the execution context of the callback
fn	the callback function you want to pass
args	the list of arguments that will be applied to the passed function
to	the name of the property that this callback should be passed to

Injection

An object whose keys are the names of the callback props (e.g. onClick, onKeyPress, ...) and the value is the generated function attached to the respective event handler. Note: the generated function's arguments are the original passed arguments along with the original event.