ea79b00c808298097276416034b02058dded6b73e8f62f63ca281214aa86593684b4b8b28d7373e9f0cc6e9445c35bd3cac21e72d80a2229adee693f292271 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <p align="center">
  2. <img src="https://i.imgur.com/BqsX9NT.png" width="300" height="300" alt="mitt">
  3. <br>
  4. <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> <a href="https://david-dm.org/developit/mitt"><img src="https://david-dm.org/developit/mitt/status.svg" alt="dependencies Status"></a>
  5. </p>
  6. # Mitt
  7. > Tiny 200b functional event emitter / pubsub.
  8. - **Microscopic:** weighs less than 200 bytes gzipped
  9. - **Useful:** a wildcard `"*"` event type listens to all events
  10. - **Familiar:** same names & ideas as [Node's EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter)
  11. - **Functional:** methods don't rely on `this`
  12. - **Great Name:** somehow [mitt](https://npm.im/mitt) wasn't taken
  13. Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.
  14. ## Table of Contents
  15. - [Install](#install)
  16. - [Usage](#usage)
  17. - [Examples & Demos](#examples--demos)
  18. - [API](#api)
  19. - [Contribute](#contribute)
  20. - [License](#license)
  21. ## Install
  22. This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
  23. ```sh
  24. $ npm install --save mitt
  25. ```
  26. Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:
  27. ```javascript
  28. // using ES6 modules
  29. import mitt from 'mitt'
  30. // using CommonJS modules
  31. var mitt = require('mitt')
  32. ```
  33. The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
  34. ```html
  35. <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  36. ```
  37. You can find the library on `window.mitt`.
  38. ## Usage
  39. ```js
  40. import mitt from 'mitt'
  41. let emitter = mitt()
  42. // listen to an event
  43. emitter.on('foo', e => console.log('foo', e) )
  44. // listen to all events
  45. emitter.on('*', (type, e) => console.log(type, e) )
  46. // fire an event
  47. emitter.emit('foo', { a: 'b' })
  48. // working with handler references:
  49. function onFoo() {}
  50. emitter.on('foo', onFoo) // listen
  51. emitter.off('foo', onFoo) // unlisten
  52. ```
  53. ### Typescript
  54. ```ts
  55. import * as mitt from 'mitt';
  56. let emitter: mitt.Emitter = new mitt();
  57. ```
  58. ## Examples & Demos
  59. <a href="http://codepen.io/developit/pen/rjMEwW?editors=0110">
  60. <b>Preact + Mitt Codepen Demo</b>
  61. <br>
  62. <img src="https://i.imgur.com/CjBgOfJ.png" width="278" alt="preact + mitt preview">
  63. </a>
  64. * * *
  65. ## API
  66. ### mitt
  67. Mitt: Tiny (~200b) functional event emitter / pubsub.
  68. Returns **Mitt**
  69. #### emit
  70. Invoke all handlers for the given type.
  71. If present, `"*"` handlers are invoked after type-matched handlers.
  72. **Parameters**
  73. - `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** The event type to invoke
  74. - `evt` **\[Any]** Any value (object is recommended and powerful), passed to each handler
  75. ### on
  76. Register an event handler for the given type.
  77. **Parameters**
  78. - `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Type of event to listen for, or `"*"` for all events
  79. - `handler` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Function to call in response to given event
  80. ### off
  81. Remove an event handler for the given type.
  82. **Parameters**
  83. - `type` **[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** Type of event to unregister `handler` from, or `"*"`
  84. - `handler` **[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)** Handler function to remove
  85. ## Contribute
  86. First off, thanks for taking the time to contribute!
  87. Now, take a moment to be sure your contributions make sense to everyone else.
  88. Development Start:
  89. This project is typed with Flow Type annotations. To ensure you have the proper typings for this project run
  90. `flow-typed install`
  91. ### Reporting Issues
  92. Found a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).
  93. If don't, just open a [new clear and descriptive issue](../../issues/new).
  94. ### Submitting pull requests
  95. Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
  96. - Fork it!
  97. - Clone your fork: `git clone https://github.com/<your-username>/mitt`
  98. - Navigate to the newly cloned directory: `cd mitt`
  99. - Create a new branch for the new feature: `git checkout -b my-new-feature`
  100. - Install the tools necessary for development: `npm install`
  101. - Make your changes.
  102. - Commit your changes: `git commit -am 'Add some feature'`
  103. - Push to the branch: `git push origin my-new-feature`
  104. - Submit a pull request with full remarks documenting your changes.
  105. ## License
  106. [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)