https://github.com/accessible-ui/use-keycode

🅰 A React hook for firing callbacks on specific keycodes
https://github.com/accessible-ui/use-keycode

Last synced: 4 months ago
JSON representation

🅰 A React hook for firing callbacks on specific keycodes

• Host: GitHub
• URL: https://github.com/accessible-ui/use-keycode
• Owner: accessible-ui
• License: mit
• Created: 2019-12-16T13:59:59.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:21:23.000Z (over 2 years ago)
• Last Synced: 2025-01-12T22:46:49.297Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 2.69 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  


    useKeycode()

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



npm i @accessible/use-keycode



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

## Quick 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 


}

```


## 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`

### `useKeycodes(handlers: Record any>)`

#### Arguments

| Argument   | Type                                             | Default     | Required? | Description                                                                           |

| ---------- | ------------------------------------------------ | ----------- | --------- | ------------------------------------------------------------------------------------- |

| `handlers` | `Record any>` | `undefined` | Yes       | An object with keys matching the `event.which` you want to trigger the callback value |

#### Returns `React.MutableRefObject`

## LICENSE

MIT