Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/developit/mitt

🥊 Tiny 200 byte functional event emitter / pubsub.
https://github.com/developit/mitt

event event-bus event-handlers event-listener eventemitter mitt pubsub tiny

Last synced: about 1 month ago
JSON representation

🥊 Tiny 200 byte functional event emitter / pubsub.

Lists

README 

        


  mitt

  


  npm

  build status

  gzip size




# Mitt



> Tiny 200b functional event emitter / pubsub.



-   **Microscopic:** weighs less than 200 bytes gzipped

-   **Useful:** a wildcard `"*"` event type listens to all events

-   **Familiar:** same names & ideas as [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)

-   **Functional:** methods don't rely on `this`

-   **Great Name:** somehow [mitt](https://npm.im/mitt) wasn't taken



Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.



## Table of Contents



-   [Install](#install)

-   [Usage](#usage)

-   [Examples & Demos](#examples--demos)

-   [API](#api)

-   [Contribute](#contribute)

-   [License](#license)



## Install



This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.



```sh

$ npm install --save mitt

```



Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:



```javascript

// using ES6 modules

import mitt from 'mitt'



// using CommonJS modules

var mitt = require('mitt')

```



The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):



```html



```



You can find the library on `window.mitt`.



## Usage



```js

import mitt from 'mitt'



const emitter = mitt()



// listen to an event

emitter.on('foo', e => console.log('foo', e) )



// listen to all events

emitter.on('*', (type, e) => console.log(type, e) )



// fire an event

emitter.emit('foo', { a: 'b' })



// clearing all events

emitter.all.clear()



// working with handler references:

function onFoo() {}

emitter.on('foo', onFoo)   // listen

emitter.off('foo', onFoo)  // unlisten

```



### Typescript



Set `"strict": true` in your tsconfig.json to get improved type inference for `mitt` instance methods.



```ts

import mitt from 'mitt';



type Events = {

  foo: string;

  bar?: number;

};



const emitter = mitt(); // inferred as Emitter



emitter.on('foo', (e) => {}); // 'e' has inferred type 'string'



emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)

```



Alternatively, you can use the provided `Emitter` type:



```ts

import mitt, { Emitter } from 'mitt';



type Events = {

  foo: string;

  bar?: number;

};



const emitter: Emitter = mitt();

```



## Examples & Demos





  Preact + Mitt Codepen Demo

  


  preact + mitt preview




* * *



## API



#### Table of Contents



-   [mitt](#mitt)

-   [all](#all)

-   [on](#on)

    -   [Parameters](#parameters)

-   [off](#off)

    -   [Parameters](#parameters-1)

-   [emit](#emit)

    -   [Parameters](#parameters-2)



### mitt



Mitt: Tiny (~200b) functional event emitter / pubsub.



Returns **Mitt** 



### all



A Map of event names to registered handler functions.



### on



Register an event handler for the given type.



#### Parameters



-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to listen for, or `'*'` for all events

-   `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Function to call in response to given event



### off



Remove an event handler for the given type.

If `handler` is omitted, all handlers of the given type are removed.



#### Parameters



-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** Type of event to unregister `handler` from, or `'*'`

-   `handler` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** Handler function to remove



### emit



Invoke all handlers for the given type.

If present, `'*'` handlers are invoked after type-matched handlers.



Note: Manually firing '\*' handlers is not supported.



#### Parameters



-   `type` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [symbol](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Symbol))** The event type to invoke

-   `evt` **Any?** Any value (object is recommended and powerful), passed to each handler



## Contribute



First off, thanks for taking the time to contribute!

Now, take a moment to be sure your contributions make sense to everyone else.



### Reporting Issues



Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).

If don't, just open a [new clear and descriptive issue](../../issues/new).



### Submitting pull requests



Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.



-   Fork it!

-   Clone your fork: `git clone https://github.com//mitt`

-   Navigate to the newly cloned directory: `cd mitt`

-   Create a new branch for the new feature: `git checkout -b my-new-feature`

-   Install the tools necessary for development: `npm install`

-   Make your changes.

-   Commit your changes: `git commit -am 'Add some feature'`

-   Push to the branch: `git push origin my-new-feature`

-   Submit a pull request with full remarks documenting your changes.



## License



[MIT License](https://opensource.org/licenses/MIT) © [Jason Miller](https://jasonformat.com/)