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: 3 days ago
JSON representation
π₯ Tiny 200 byte functional event emitter / pubsub.
- Host: GitHub
- URL: https://github.com/developit/mitt
- Owner: developit
- License: mit
- Created: 2017-01-15T01:10:50.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-08-14T08:58:20.000Z (4 months ago)
- Last Synced: 2024-12-08T17:42:36.551Z (4 days ago)
- Topics: event, event-bus, event-handlers, event-listener, eventemitter, mitt, pubsub, tiny
- Language: TypeScript
- Homepage: https://npm.im/mitt
- Size: 212 KB
- Stars: 10,915
- Watchers: 71
- Forks: 442
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - developit/mitt - π₯ Tiny 200 byte functional event emitter / pubsub. (TypeScript)
- awesomeLibrary - mitt - π₯ Tiny 200 byte functional event emitter / pubsub. (θ―θ¨θ΅ζΊεΊ / typescript)
- awesome-tiny-js - mitt - Plain event emitter that I use on most projects, <img align="top" height="24" src="./img/mitt.svg"> (Event Emitters)
- awesome-github-star - mitt
- awesome-list - mitt
- awesome - mitt - π₯ Tiny 200 byte functional event emitter / pubsub. (JavaScript)
README
# 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 takenMitt 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
* * *
## 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/)