---

npm i @accessible/use-keycode

---

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

Returns React.MutableRefObject<any>

LICENSE

MIT