@accurat/event-utils

High order functions to use in React's JSX when working with events

Stats

StarsIssuesVersionUpdatedCreatedSize
@accurat/event-utils
201.0.23 years ago3 years agoMinified + gzip package size for @accurat/event-utils in KB

Readme

@accurat/event-utils

High order functions to use in React's JSX when working with events

The objective of these functions is to reduce the boilerplate code when handling events in react, and to wire up the pure state setters directly to the component.

Install

yarn add @accurat/event-utils

Usage

Given a basic and functional state setter in react

setName = (name) => {
  this.setState({ name })
}

or the equivalent in mobx-state-tree

setName(name) {
  self.name = name
}

with @accurat/event-utils you can use the setter directly on the JSX component:

import { eventValueExtractor } from '@accurat/event-utils'

// ...

<input value={name} onChange={eventValueExtractor(setName)} />

Another common use case is with links and custom routing:

import { preventingDefault } from '@accurat/event-utils'

// ...

<a href={href} onClick={preventingDefault(gotoPage)} />

Also those functions use the powers of functional programming 🌪, so you can combine them!

import { preventingDefault, replaceArguments } from '@accurat/event-utils'

// ...

<div>
  {options.map((option, i) =>
    <a
      href=""
      key={i}
      onClick={preventingDefault(replaceArguments(setName, option))}
    >
      {option}
    </a>
  )}
</div>

This way you don't have to use anymore the build pattern in react, and you can get rid of all those boilerplate methods in the component!

Another thing you can get rid of is the onKeyDown method with the switch case inside that fires a function on a certain event.key, you can use an object association instead:

import { attachListenersToKeys } from '@accurat/event-utils'

// ...

<input
  type="text"
  onKeyDown={attachListenersToKeys({
    Enter: preventingDefault(state.commit),
    ArrowDown: state.selectNext,
    ArrowUp: state.selectPrev,
  })}
/>

API

The available functions are:

  • preventingDefault(fn)
  • stoppingPropagation(fn)
  • eventValueExtractor(fn)
  • eventTargetExtractor(fn)
  • addArguments(fn, ...args)
  • replaceArguments(fn, ...args) (similar to lodash.partial)

If the names aren't self-explanatory enough, you can check out the source code, the functions are really simple and straightforward.

Note that react also supports passing null to the event binding other than a function, so you will be also able to do

<a href="" onClick={preventingDefault(this.props.onClick)} />

allowing the component to receive null as the onClick prop, thanks to the line

if (fn === null) return null

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.