---

useKey()

npm i @accessible/use-key

---

A React hook for handling keydown events on specific event.key values. It also normalizes non-standard event.key values from IE to their modern equivalents.

Quick Start

import * as React from 'react'
import useKey from '@accessible/use-key'

const Component = () => {
  const ref = React.useRef(null)

  // Listens to keydown events on the `ref` above
  useKey(ref, {
    // Logs event when the Escape key is pressed
    Escape: console.log,
    // Logs "Key was pressed: Enter" to the console when Enter is pressed
    Enter: (event) => console.log('Key was pressed:', event.key),
  })

  // Listens to keydown events on the window
  useKey(window, {
    // Logs event when the Escape key is pressed
    Escape: console.log,
    // Logs "Key was pressed: Enter" to the console when Enter is pressed
    Enter: (event) => console.log('Key was pressed:', event.key),
  })

  return <div ref={ref} />
}

API

useKey(target, handlers)

Arguments

Argument	Type	Required?	Description
target	React.RefObject<T> | T | Window | Document | null	Yes	A React ref, element, window, or document to add the key listener to
handlers	Record<string, (event?: KeyboardEvent) => any>	Yes	A mapping with keys matching the event.key string you want to listen on. The value for each key should be an event listener.

Returns void

LICENSE

MIT