TS: enhanced UseKeyPress React Hook

UseKeyPress.ts

// https://novajs.co/react-hook-key-press

import { useState, useEffect } from 'react'

type KeyConfig = {
  key: string
  ctrl?: boolean
  alt?: boolean
  shift?: boolean
  meta?: boolean
}

export const useKeyPress = (config: KeyConfig): [boolean, KeyboardEvent | undefined] => {
  const [keyPressed, setKeyPressed] = useState(false)
  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>()
  const { key: targetKey, ctrl, alt, shift, meta } = config

  const handleKeyDown = (e: KeyboardEvent) => {
    const { key, ctrlKey, altKey, shiftKey, metaKey } = e

    if (check(key, targetKey, ctrl, alt, shift, meta, ctrlKey, altKey, shiftKey, metaKey)) {
      setKeyPressed(true)
      setKeyboardEvent(e)
    }
  }

  const handleKeyUp = (e: KeyboardEvent) => {
    const { key, ctrlKey, altKey, shiftKey, metaKey } = e

    if (check(key, targetKey, ctrl, alt, shift, meta, ctrlKey, altKey, shiftKey, metaKey)) {
      setKeyPressed(false)
      setKeyboardEvent(undefined)
    }
  }

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown)
    window.addEventListener('keyup', handleKeyUp)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      window.removeEventListener('keyup', handleKeyUp)
    }
  }, [])

  return [keyPressed, keyboardEvent]
}

const check = (key: string,
  targetKey: string,
  ctrl: boolean | undefined,
  alt: boolean | undefined,
  shift: boolean | undefined,
  meta: boolean | undefined,
  ctrlKey: boolean,
  altKey: boolean,
  shiftKey: boolean,
  metaKey: boolean): boolean | undefined => {
    return (!ctrl && !alt && !shift && !meta && key === targetKey) ||
    (ctrl && key === targetKey && ctrlKey === ctrl) ||
    (alt && key === targetKey && altKey === alt) ||
    (shift && key === targetKey && shiftKey === shift) ||
    (meta && key === targetKey && metaKey === meta)
}