@hypernym/emitter

A super simple and lightweight event emitter.

Repository ✦ Package ✦ Releases ✦ Discussions

pnpm add @hypernym/emitter

Features

• TypeScript friendly
• Fully tree-shakeable
• No dependencies

_{Package size: ~321 B minified, ~226 B gzip}

CDN

Here are some examples of how to integrate Emitter from a CDN via a script tag.

Also, it is possible to download files manually and serve them accordingly.

ESM (minified)

<script type="module">
  import { createEmitter } from 'https://unpkg.com/@hypernym/emitter/dist/index.min.mjs'
  const emitter = createEmitter()
</script>

IIFE (minified)

<script src="https://unpkg.com/@hypernym/emitter/dist/index.iife.js"></script>
<script>
  const { createEmitter } = Emitter
  const emitter = createEmitter()
</script>

UMD (minified)

<script src="https://unpkg.com/@hypernym/emitter/dist/index.umd.js"></script>
<script>
  const { createEmitter } = Emitter
  const emitter = createEmitter()
</script>

Usage

JS

import { createEmitter } from '@hypernym/emitter'

const emitter = createEmitter()

emitter.on('event-id', (e) => console.log(e.x, e.y))

emitter.emit('event-id', { x: 0, y: 0 })

TS

import { createEmitter, type Emitter } from '@hypernym/emitter'

type Events = {
  'event-id': { x: number; y: number }
  // ...
}

const emitter: Emitter<Events> = createEmitter<Events>()

emitter.on('event-id', (e) => console.log(e.x, e.y))

emitter.emit('event-id', { x: 0, y: 0 })

API

.on()

Registers an event listener for a specific event type.

Returns a cleanup function that removes the listener when called.

emitter.on<K>(id: K, callback: (event: Events[K]) => void): () => void

// Adds scroll listener
const off = emitter.on('scroll', ({ x, y }) => {
  console.log(x, y)
})

// Removes the listener
off()

.off()

Removes event listeners.

emitter.off<K>(id?: K | undefined, callback?: ((event: Events[K]) => void) | undefined): void

// Removes all event listeners across all event types
emitter.off()

// Removes all click listeners
emitter.off('click')

// Custom scroll callback
const scrollCallback = ({ x, y }) => {
  console.log(x, y)
}

// Adds specific scroll listener
emitter.on('scroll', scrollCallback)

// Removes specific scroll callback
emitter.off('scroll', scrollCallback)

.emit()

Emits a specific event.

emitter.emit<K>(id: K, ...event: Events[K] extends undefined ? [event?: Events[K]] : [event: Events[K]]): void

// Emits scroll event with position data
emitter.emit('scroll', { x: window.scrollX, y: window.scrollY })

// Emits event without second parameter
emitter.emit('eventWithoutData')

.events

Main events map.

Stores all registered events.

emitter.events

.has()

Checks if a specific event by id exists in the map.

emitter.events.has(id: string | symbol)

.get()

Gets a specific event by id from the map.

emitter.events.get(id: string | symbol)

.delete()

Deletes a specific event by id from the map.

emitter.events.delete(id: string | symbol)

.clear()

Removes all events from the map.

emitter.events.clear()

.size

Indicates the number of registered events in the map.

emitter.events.size

Community

Feel free to ask questions or share new ideas.

Use the official discussions to get involved.

License

Developed in 🇭🇷 Croatia, © Hypernym Studio.

Released under the MIT license.