# @f/event-handler

> Create an event handler with some sweeter syntax

Latest version **1.0.4** (published 2016-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @f/event-handler
pnpm add @f/event-handler
yarn add @f/event-handler
bun add @f/event-handler
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2016-11-10 |
| First published | 2016-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | f |

## Links

- npm: https://www.npmjs.com/package/@f/event-handler
- Repository: https://github.com/micro-js/event-handler
- Homepage: https://github.com/micro-js/event-handler#readme
- Issues: https://github.com/micro-js/event-handler/issues
- npm.io page: https://npm.io/package/@f/event-handler

## Dependencies (9)

- [@f/has](https://npm.io/package/@f/has.md) ^1.0.1
- [@f/map](https://npm.io/package/@f/map.md) ^1.5.3
- [@f/identity](https://npm.io/package/@f/identity.md) ^1.1.1
- [@f/is-array](https://npm.io/package/@f/is-array.md) ^1.1.1
- [@f/keychord](https://npm.io/package/@f/keychord.md) ^1.1.1
- [@f/get-value](https://npm.io/package/@f/get-value.md) ^1.0.1
- [@f/is-object](https://npm.io/package/@f/is-object.md) ^1.1.4
- [@f/maybe-over](https://npm.io/package/@f/maybe-over.md) ^1.0.0
- [@f/is-function](https://npm.io/package/@f/is-function.md) ^1.1.1

## Recent versions

- 1.0.4 (latest) — 2016-11-10
- 1.0.3 — 2016-11-09
- 1.0.2 — 2016-03-19
- 1.0.1 — 2016-02-08
- 1.0.0 — 2016-02-08

## README

# event-handler

[![Build status][travis-image]][travis-url]
[![Git tag][git-image]][git-url]
[![NPM version][npm-image]][npm-url]
[![Code style][standard-image]][standard-url]

Syntax sugar for events handlers. Kind of like the excellent, [classnames](https://github.com/JedWatson/classnames), but for events.

## Installation

    $ npm install @f/event-handler

## Usage

This module gives you some special syntax to make your event handlers more declarative and functional. You can create handlers for only certain keypresses, or easily attach multiple handlers to a single event.

This example calls `updateText` with every keydown event, but also calls `submit` only when enter is pressed:

```js
var ev = require('@f/event-handler')

function render () {
  return <input onKeyDown={ev([{enter: submit}, updateText])} />
}
```

You may pass an array, object, or just a plain function, and you may also do any of these things recursively. So, for instance:

```js
var ev = require('@f/event-handler')

function render () {
  return <input onKeyDown={ev[{enter: [submit, close]}, updateText]} />
}
```

This will close the input and submit when `enter` is pressed, it will also update the text on every normal keydown.

## Return values

If you rely on the return values of your handler, we have you covered. The value returned by your handlers will be returned from the constructed handler. If you've passed an array, that array will be mapped [over](https://github.com/micro-js/over) the event, and the resulting array will be returned.

## Decoders

There is another syntax for specifying these handlers, which is the ability to pass pure functional decoders to transform the event before passing it in to the handler. You may specify it like this:

```js
const select = node => node.select()
const decodeNode = e => e.target

ev({handler: select, decoder: decodeNode})
```

You may also declaratively specify `stopPropagation: true` and `preventDefault: true`. These capabilities are useful for creating more functionally pure, declarative event handlers.

## API

### eventHandler(descriptor)

- `descriptor` - An object, array, or function. If it's an object, the keys will be used as filters to call the handler only if the event matches the key. At the moment, the only allowed keys are [keychords](https://github.com/micro-js/keychord), though more may be forthcoming if there is interest. If an array is passed, all the functions in the array are called.

**Returns:** A constructed event handler that you may just pass `event` to, and it will execute the handlers you've specified according to your `descriptor`.

## License

MIT

[travis-image]: https://img.shields.io/travis/micro-js/event-handler.svg?style=flat-square
[travis-url]: https://travis-ci.org/micro-js/event-handler
[git-image]: https://img.shields.io/github/tag/micro-js/event-handler.svg?style=flat-square
[git-url]: https://github.com/micro-js/event-handler
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: https://github.com/feross/standard
[npm-image]: https://img.shields.io/npm/v/@f/event-handler.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@f/event-handler

---
_Source: https://npm.io/package/@f/event-handler · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._