react-event-utils

Shorthand utils for dealing with React events

Install

$ yarn add react-event-utils

About

This library exposes shorthand methods that call event methods for you.

This will allow you to stop having components like this:

class Form extends React.Component {
  constructor(props) {
    super(props);
 
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 
  handleSubmit(e) {
    e.preventDefault();
 
    doSomething(e.target.title.value);
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="title" />
      </form>
    );
  }
}

While you could just write:

import { preventDefault /*, persist, stopPropagation */ } from 'react-event-utils';
 
export const Form = () =>
  <form onSubmit={preventDefault(e => doSomething(e.target.title.value))}>
    <input type="text" name="title" />
  </form>;

Currently persist, preventDefault and stopPropagation are implemented.

License

MIT © Bertrand Marron