A tiny utility library for simplifying DOM event handling.

Installation

Install using your preferred package manager:

npm install @lickle/dom
# or
yarn add @lickle/dom
# or
pnpm add @lickle/dom

Usage

The on function wraps addEventListener and returns an unsubscribe function, making it easy to manage event listeners.

import { on } from '@lickle/dom'

const unsubscribe = on(document)('mousemove', (e) => console.log('Mouse moved!', e))
...
unsubscribe()

The dispose utility lets you merge multiple unsubscribe functions into one. This is handy for managing multiple listeners at once.

import { on, dispose } from '@lickle/dom'

const unsubscribeAll = dispose(
  on(document)('mousemove', (e) => console.log('Mouse moved!')),
  on(document)('mousedown', (e) => console.log('Mouse down!')),
  on(document)('mouseup', (e) => console.log('Mouse up!')),
)

...
unsubscribeAll()

The core of the library is the on function, which provides a type-safe, declarative way to add and remove DOM event listeners. While the implementation itself is simple, the power of the library lies in the On type, which is designed to provide precise typings for various DOM targets and their respective events.

Why?

This library is for developers who value concise, declarative, and type-safe code. It is especially useful in frontend frameworks like React, where managing event listeners throughout a component's lifecycle is common. For example:

import { on } from '@lickle/dom'
import { useEffect } from 'react'

useEffect(() => {
  return on(document)('mousemove', () => {
    console.log('Mouse moved!')
  })
}, [])

License

MIT © Dan Beaven