README.md

useEventListener

This hook handles adding the event listener and removal on cleanup. This can help to prevent memory leaks by removing the event listener.

Usage

import { useCallback, useState } from 'react'
import useListener from '@joshreep/captain-hooks/useEventListener'

function App() {
    const [coordinates, setCoordinates] = useState({ x: 0, y: 0 })

    const handler = useCallback(
        ({ clientX, clientY }: MouseEvent) => {
            setCoordinates({ x: clientX, y: clientY })
        },
        [setCoordinates]
    )

    useEventListener('mousemove', handler)

    return (
        <h1>The mouse position is ({coordinates.x}, {coordinates.y)</h1>
    )
}

Signature

export default function useEventListener<T extends Element>(
    eventName: string,
    handler: EventListener,
    element: T | (Window & typeof globalThis) = window,
    condition: boolean = true,
): void

Props

Prop	Type	Default Value	Required	Description
eventName	string		Yes	Any valid event name
handler	(e: Event) => void		Yes	Event handler
element	Element, window	window	No	Element to bind the event listener on
condition	boolean	true	No	If condition is false, then the event listener will not be bound to the element