make-event-props

What is make-event-props?

The make-event-props npm package is designed to help developers create event properties for React components. It simplifies the process of binding event handlers to components by generating the necessary props for a given set of event names.

What are make-event-props's main functionalities?

Generate Event Props

This feature allows you to generate event properties for a set of event names. You provide the event names and corresponding handlers, and the package returns an object with the event properties.

const makeEventProps = require('make-event-props');

const eventNames = ['onClick', 'onMouseEnter'];
const eventHandlers = {
  onClick: () => console.log('Clicked!'),
  onMouseEnter: () => console.log('Mouse Entered!')
};

const props = makeEventProps(eventNames, eventHandlers);
console.log(props); // { onClick: [Function], onMouseEnter: [Function] }

Filter Event Handlers

This feature allows you to filter and include only the event handlers that match the provided event names. It helps in managing and organizing event handlers efficiently.

const makeEventProps = require('make-event-props');

const eventNames = ['onClick', 'onMouseEnter', 'onMouseLeave'];
const eventHandlers = {
  onClick: () => console.log('Clicked!'),
  onMouseEnter: () => console.log('Mouse Entered!'),
  onMouseLeave: () => console.log('Mouse Left!')
};

const props = makeEventProps(eventNames, eventHandlers);
console.log(props); // { onClick: [Function], onMouseEnter: [Function], onMouseLeave: [Function] }

Other packages similar to make-event-props

react-event-listener

The react-event-listener package provides a way to manage global event listeners in a React application. Unlike make-event-props, which focuses on generating event props for components, react-event-listener is more about attaching and managing global event listeners.

README

Make-Event-Props

A function that, given props, returns an object of event callback props optionally curried with additional arguments.

This package allows you to pass event callback props to a rendered DOM element without the risk of applying any invalid props that could cause unwanted side effects.

tl;dr

• Install by executing npm install make-event-props or yarn add make-event-props.
• Import by adding import makeEventProps from 'make-event-props'.
• Create your event props object:

  const eventProps = useMemo(
    () => makeEventProps(props, (eventName) => additionalArgs),
    [additionalArgs],
  );
  

• Use your event props:

  return <div {...eventProps} />;
  

License

The MIT License.

Author

Wojciech Maj