mitt

# 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

* * * ## 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/)