https://github.com/konsumer/emitonoff
Extremely simple event emitter for javascript
https://github.com/konsumer/emitonoff
Last synced: 4 months ago
JSON representation
Extremely simple event emitter for javascript
- Host: GitHub
- URL: https://github.com/konsumer/emitonoff
- Owner: konsumer
- License: mit
- Created: 2015-01-16T19:23:18.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T13:43:16.000Z (about 6 years ago)
- Last Synced: 2025-09-04T19:52:03.234Z (10 months ago)
- Language: JavaScript
- Size: 2.74 MB
- Stars: 39
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://badge.fury.io/js/emitonoff)
[](https://travis-ci.org/konsumer/emitonoff)
[](https://codeclimate.com/github/konsumer/emitonoff)
This is a simple, extremely lightweight, zero-dependency event/pubsub system for node or the browser.
It's pronounced like ["stroganoff"](http://dictionary.cambridge.org/us/pronunciation/british/stroganoff), but "emit" instead of "stroge".
It gives your objects these really basic functions:
- `emit` - publish an event
- `on` - subscribe to an event
- `off` - unsubscribe an event
Also available:
- `pause` - queue incoming `emit()` while you are waiting for something (sometimes needed for testing)
- `resume` - run all the paused queue and process `emit()` normally, again
## install
[](https://greenkeeper.io/)
### nodejs/webpack/browserify
```
npm install --save emitonoff
```
then, in your code:
```javascript
var emitonoff = require('emitonoff');
```
### plain browser global
You can use a CDN:
```html
```
or alternately use one of the files in `dist/`, locally.
## usage details
```javascript
var kitty = {
purr: function(){
this.emit('purr');
},
eat: function(food){
this.emit('ate', food);
}
};
emitonoff(kitty);
function showAte(food){
console.log('The kitty was hungry, so it ate', food);
}
function showPurred(){
console.log('the kitty purred.')
}
kitty.on('ate', showAte);
kitty.on('purr', showPurred);
kitty.eat('kibble');
kitty.eat('mouse');
kitty.off('ate', showAte);
kitty.eat('tail');
kitty.purr();
```
You can also use it without an object, like this:
```javascript
var kitty = emitonoff();
function showAte(food){
console.log('The kitty was hungry, so it ate', food);
}
function showPurred(){
console.log('the kitty purred.')
}
kitty.on('ate', showAte);
kitty.on('purr', showPurred);
kitty.emit('ate', 'kibbles');
kitty.emit('ate', 'bits');
kitty.emit('purr');
```
### react
You can also use it with react (as a simpler alternative to flux, redux, thunk, etc.)
Here is an example:
```js
import React from 'react'
import ReactDOM from 'react-dom'
import emitonoff from 'emitonoff'
import EmitOnOff from 'emitonoff/EmitOnOff'
// this could also be exported from a seperate file for sharing with other code
const state = emitonoff({counter:0})
const App = (props) => (
APP {state.counter}
)
ReactDOM.render(, document.getElementById('root'))
// async re-renders
setInterval(() => {
state.counter++
state.emit('render')
}, 1000)
```
You can also make lots of little bound components, with different triggers and differnt stores!
```js
import React from 'react'
import ReactDOM from 'react-dom'
import emitonoff from 'emitonoff'
import EmitOnOff from 'emitonoff/EmitOnOff'
// this could also be exported from a seperate file for sharing with other code
const state = {
counter: emitonoff({counter: 0}),
random: emitonoff({value: 0})
}
const App = (props) => (
APP
counter: {state.counter.counter}
random: {state.random.value}
)
ReactDOM.render(, document.getElementById('root'))
// async re-renders
setInterval(() => {
state.counter.counter++
state.random.value = Math.random()
state.counter.emit('update')
state.random.emit('new')
}, 1000)
```
Note: using the standard `render` event trigger everywhere, and a single store, in general, will probably simplify things but do what you like!
## browser support
I haven't done too much browser-testing, but it should work on any browser that can `Array.slice` (all of them in the last 15 years.) If you need it to work on a particular old browser, file a bug and I will add support (or tell you t find a `Array.slice` polyfill.)
It works in IE5.5.