Skip to content

🅰 A React hook for firing callbacks on specific keycodes

License

Notifications You must be signed in to change notification settings

accessible-ui/use-keycode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


useKeycode()

Bundlephobia Code coverage Build status NPM Version MIT License

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

About

🅰 A React hook for firing callbacks on specific keycodes

Resources

License

Stars

Watchers

Forks

Packages

No packages published