|
1 | | -# `mitt` |
| 1 | +<p align="center"> |
| 2 | + <img src="https://i.imgur.com/BqsX9NT.png" width="256" height="256" alt="mitt"> |
| 3 | + <br> |
| 4 | + <b>Mitt</b>: tiny 200b functional event emitter / pubsub. |
| 5 | + <br> |
| 6 | + <a href="https://www.npmjs.org/package/mitt"><img src="https://img.shields.io/npm/v/mitt.svg?style=flat" alt="npm"></a> <a href="https://travis-ci.org/developit/mitt"><img src="https://travis-ci.org/developit/mitt.svg?branch=master" alt="travis"></a> |
| 7 | +</p> |
2 | 8 |
|
3 | | -[](https://www.npmjs.org/package/mitt) |
4 | | -[](https://travis-ci.org/developit/mitt) |
5 | 9 |
|
6 | | -**Tiny (~200b) functional event emitter / pubsub.** |
| 10 | +## Why Mitt? |
| 11 | + |
| 12 | +- **Microscopic:** weighs less than 200 bytes gzipped |
| 13 | +- **Useful:** a wildcard `"*"` event type listens to all events |
| 14 | +- **Famliar:** same names & ideas as [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) |
| 15 | +- **Functional:** methods don't rely on `this` |
| 16 | +- **Great Name:** somehow [mitt](https://npm.im/mitt) wasn't taken |
7 | 17 |
|
8 | | -**It's tiny:** no dependencies and only **190 bytes** when gzipped _(250b without)_. |
9 | 18 |
|
10 | 19 | * * * |
11 | 20 |
|
12 | | -## Installation |
13 | 21 |
|
14 | | -```sh |
15 | | -npm install --save mitt |
| 22 | +## Usage |
| 23 | + |
| 24 | +After installing via `npm install --save mitt`: |
| 25 | + |
| 26 | +```js |
| 27 | +import mitt from 'mitt' |
| 28 | + |
| 29 | +let emitter = mitt() |
| 30 | + |
| 31 | +// listen to an event |
| 32 | +emitter.on('foo', e => console.log('foo', e) ) |
| 33 | + |
| 34 | +// listen to all events |
| 35 | +emitter.on('*', (type, e) => console.log(type, e) ) |
| 36 | + |
| 37 | +// fire an event |
| 38 | +emitter.emit('foo', { a: 'b' }) |
| 39 | + |
| 40 | +// working with handler references: |
| 41 | +function onFoo() {} |
| 42 | +emitter.on('foo', onFoo) // listen |
| 43 | +emitter.off('foo', onFoo) // unlisten |
16 | 44 | ``` |
17 | 45 |
|
18 | 46 | * * * |
@@ -52,22 +80,3 @@ If present, `"*"` handlers are invoked prior to type-matched handlers. |
52 | 80 |
|
53 | 81 | - `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The event type to invoke |
54 | 82 | - `event` **\[Any]** An event object, passed to each handler |
55 | | - |
56 | | -* * * |
57 | | - |
58 | | -## Sample usage |
59 | | - |
60 | | -```es6 |
61 | | -import mitt from 'mitt' |
62 | | - |
63 | | -let emitter = mitt() |
64 | | - |
65 | | -// listen to an event |
66 | | -emitter.on('foo', e => console.log('foo', e) ) |
67 | | - |
68 | | -// listen to all events |
69 | | -emitter.on('*', (type, e) => console.log(type, e) ) |
70 | | - |
71 | | -// fire an event |
72 | | -emitter.emit('foo', { a: 'b' }) |
73 | | -``` |
|
0 commit comments