@accessible/use-keycode NPM

A React hook for handling specific key codes with a callback on keydown

Quick Start

import {useKeycode, useKeycodes} from '@accessible/use-keycode'
// one keycode
const Component = () => {
  // logs event when escape key is pressed
  const ref = useKeycode(27, console.log)
  return <div ref={ref} />
}
// several keycodes
const Component = () => {
  // logs event when escape or enter key is pressed
  const ref = useKeycodes({27: console.log, 13: console.log})
  return <div ref={ref} />
}

API

`useKeycode(which: number, callback: (event?: KeyboardEvent) => any)`

Arguments

Argument	Type	Default	Required?	Description
`which`	number	`undefined`	Yes	The `event.which` you want to trigger the callback
callback	`(event?: KeyboardEvent) => any`	`undefined`	Yes	The callback you want to trigger when the `event.which` matches the latest `keyUp` event

Returns `React.MutableRefObject<any>`

`useKeycodes(handlers: Record<number, (event?: KeyboardEvent) => any>)`

Arguments

Argument	Type	Default	Required?	Description
`handlers`	`Record<number, (event?: KeyboardEvent) => any>`	`undefined`	Yes	An object with keys matching the `event.which` you want to trigger the callback value