useKeyboardEvent

1'use client'
2 
3import * as React from 'react'
4 
5export type KeyboardEventFilter = string | ((event: KeyboardEvent) => boolean)
6 
7export function useKeyboardEvent(
8  predicate: KeyboardEventFilter,
9  callback: (event: KeyboardEvent) => void,
10  options: {
11    event?: 'keydown' | 'keypress' | 'keyup'
12    target?: HTMLElement | React.RefObject<HTMLElement | null>
13    deps?: React.DependencyList
14  } = {},
15): void {
16  const { event = 'keydown', target = window } = options
17  const callbackEvent = React.useEffectEvent(callback)
18  const getPredicateEvent = React.useEffectEvent((ev: KeyboardEvent) => {
19    return typeof predicate === 'string'
20      ? ev.key === predicate
21      : predicate(ev)
22  })
23 
24  React.useEffect(() => {
25    const abortController = new AbortController()
26 
27    const t = 'current' in target ? target.current : target
28 
29    if (!t) {
30      return
31    }
32 
33    t.addEventListener(event, (e) => {
34      const event = e as KeyboardEvent
35      const matches = getPredicateEvent(event)
36 
37      if (matches) {
38        callbackEvent(event)
39      }
40    }, {
41      signal: abortController.signal,
42    })
43 
44    return () => {
45      abortController.abort()
46    }
47  // eslint-disable-next-line react-hooks/exhaustive-deps
48  }, [event, target, ...(options.deps || [])])
49}