Use-typed-event-listener NPM

use-typed-event-listener

use-typed-event-listener is a React Hook for DOM event listeners with TypeScript supported

With TypeScript helps, this package can detect which event type the element supports, and automatically cast a correct typing for event

Installation

npm install use-typed-event-listener
# or
yarn add use-typed-event-listener

Interface

useEventListener(element, eventType, listener[, options])

element can be window, document or any HTMLElement. If it is undefined, no event will not be bound
eventType is a case-sensitive string representing the event type to listen for
listener is the callback function when an event of eventType occurs
options (optional) see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Usage

listener typings will be automatically casted based on element and eventType

import useEventListener from 'use-typed-event-listener'

export default (props: Props) => {
  // typings for `event` will be `MouseEvent` as this package recognizes the `click` event type
  useEventListener(window, 'click', (event) => {
    console.log(event.buttons)
  })

  return <SomeComponent />
}

No need to avoid passing new reference to listener or options, they are memorized and will not trigger the hook again

import useEventListener from 'use-typed-event-listener'

export default (props: Props) => {
  // this hook will only run once
  useEventListener(window, 'click', (event) => {}, {
    capture: true,
  })

  return <SomeComponent />
}

Prevent casting eventType as string

import useEventListener from 'use-typed-event-listener'

export default (props: Props) => {
  const eventType: string = 'click'

  useEventListener(window, eventType, (event) => {
    // as `eventType` is a wild card string, `event` will fallback to general `Event` type
    // this line will throw `Property 'buttons' does not exist on type 'Event'.ts(2339)`
    console.log(event.buttons)
  })

  return <SomeComponent />
}

Checks if element support this event type

import useEventListener from 'use-typed-event-listener'

export default (props: Props) => {
  // this pass as HTMLElement supports copy event
  useEventListener(document.body, 'copy', (event) => {
    console.log(event.clipboardData)
  })

  // as Window doesn't support copy event
  useEventListener(window, 'copy', (event) => {
    // this throws `Property 'clipboardData' does not exist on type 'Event'.ts(2339)`
    console.log(event.clipboardData)
  })

  return <SomeComponent />
}