hook to detect keyboard key pressed and execute an action when this key is pressed

useKeyPress.ts

import { useEffect } from 'react'

type KeyPress = {
  key: string
  action: () => void
}

const useKeyPress = ({ key, action }: KeyPress) => {
  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === key) action()
    document.removeEventListener('keydown', onKeyDown)
  }

  const onKeyUp = () => {
    document.addEventListener('keydown', onKeyDown, { once: true })
  }

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    document.addEventListener('keyup', onKeyUp)

    return () => {
      document.removeEventListener('keydown', onKeyDown)
      document.removeEventListener('keyup', onKeyUp)
    }
  })
}

export default useKeyPress

/* 
  Usage:

  useKeyPress({
    key: 'ArrowDown',
    action: () => {
      setState(x)
    }
  })

*/