Skip to content
Simple and tiny (72 bytes) event emitter library for JavaScript
TypeScript JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 803b0fe May 12, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Add Emitter type test May 12, 2020
.editorconfig Fix .editorconfig Jan 3, 2017
.gitignore Big refactoring with better types, ES2015+ and smaller size Feb 13, 2020
.npmignore Update code tools May 11, 2020
.travis.yml Remove Node.js 8 from CI Feb 4, 2020
CHANGELOG.md Release 5.1.7 version May 12, 2020
LICENSE Initial commit Sep 20, 2016
README.md Improve React Native support Mar 22, 2020
index.d.ts Simplify Emitter type usage May 12, 2020
index.js Update code tools May 11, 2020
package.json Release 5.1.7 version May 12, 2020
tsconfig.json Update code tools May 11, 2020
yarn.lock Update code tools May 11, 2020

README.md

Nano Events

Simple and tiny event emitter library for JavaScript.

  • Only 72 bytes (minified and gzipped). It uses Size Limit to control size.
  • on method returns unbind function. You don’t need to save callback to variable for removeListener.
  • TypeScript and ES modules support.
  • No aliases, just emit and on methods. No Node.js EventEmitter compatibility.
import { createNanoEvents } from 'nanoevents'

const emitter = createNanoEvents()

const unbind = emitter.on('tick', volume => {
  summary += volume
})

emitter.emit('tick', 2)
summary //=> 2

unbind()
emitter.emit('tick', 2)
summary //=> 2
Sponsored by Evil Martians

Table of Contents

TypeScript

Nano Events accepts interface with event name to listener argument types mapping.

interface Events {
  set: (name: string, count: number) => void,
  tick: () => void
}

const emitter = createNanoEvents<Events>()

// Correct calls:
emitter.emit('set', 'prop', 1)
emitter.emit('tick')

// Compilation errors:
emitter.emit('set', 'prop', '1')
emitter.emit('tick', 2)

Mixing to Object

Because Nano Events API has only just 2 methods, you could just create proxy methods in your class or encapsulate them entirely.

class Ticker {
  constructor () {
    this.emitter = createNanoEvents()
    this.internal = setInterval(() => {
      this.emitter.emit('tick')
    }, 100)
  }

  stop () {
    clearInterval(this.internal)
    this.emitter.emit('stop')
  }

  on (event, callback) {
    return this.emitter.on(event, callback)
  }
}

Add Listener

Use on method to add listener for specific event:

emitter.on('tick', number => {
  console.log(number)
})

emitter.emit('tick', 1)
// Prints 1
emitter.emit('tick', 5)
// Prints 5

In case of your listener relies on some particular context (if it uses this within itself) you have to bind required context explicitly before passing function in as a callback.

var app = {
  userId: 1,
  getListener () {
    return () => {
      console.log(this.userId)
    }
  }
}
emitter.on('print', app.getListener())

Note: binding with use of the .bind() method won’t work as you might expect and therefore is not recommended.

Remove Listener

Methods on returns unbind function. Call it and this listener will be removed from event.

const unbind = emitter.on('tick', number => {
  console.log('on ' + number)
})

emitter.emit('tick', 1)
// Prints "on 1"

unbind()
emitter.emit('tick', 2)
// Prints nothing

Execute Listeners

Method emit will execute all listeners. First argument is event name, others will be passed to listeners.

emitter.on('tick', (a, b) => {
  console.log(a, b)
})
emitter.emit('tick', 1, 'one')
// Prints 1, 'one'

Events List

You can get used events list by events property.

const unbind = emitter.on('tick', () => { })
emitter.events //=> { tick: [ [Function] ] }

Once

If you need add event listener only for first event dispatch, you can use this snippet:

class Ticker {
  constructor () {
    this.emitter = createNanoEvents()
  }
  
  once (event, callback) {
    const unbind = this.emitter.on(event, (...args) => {
      unbind()
      callback(...args)
    })
    return unbind
  }
}

Remove All Listeners

emitter.on('event1', () => { })
emitter.on('event2', () => { })

emitter.events = { }
You can’t perform that action at this time.