useKeycode()
<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@accessible/use-keycode?style=for-the-badge&labelColor=24292e"><img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/accessible-ui/use-keycode?style=for-the-badge&labelColor=24292e"><img alt="Build status" src="https://img.shields.io/travis/accessible-ui/use-keycode?style=for-the-badge&labelColor=24292e"><img alt="NPM Version" src="https://img.shields.io/npm/v/@accessible/use-keycode?style=for-the-badge&labelColor=24292e"><img alt="MIT License" src="https://img.shields.io/npm/l/@accessible/use-keycode?style=for-the-badge&labelColor=24292e">
npm i @accessible/use-keycode
A React hook for handling specific key codes with a callback on
keydownQuick Start
```jsx harmony 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
}
// several keycodes
const Component = () => {
// logs event when escape or enter key is pressed
const ref = useKeycodes({27: console.log, 13: console.log})
return
}
```
Returns
Returns
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 |