useKeyPress

useKeyPress hook, 使用时传入需要使用的key的名字，或者一个自定义函数。在key按下或者自定义函数返回true值的时候改变keyPressed的值为当前按下的键，或者在key弹起时把keyPressed设为null。

import { useEffect, useState } from "react";
 
export default function useKeyPress(targetKey) {
  const [keyPressed, setKeyPressed] = useState(null)
 
  useEffect(() => {
    const tester = (e) => {
      if (typeof targetKey === "function") {
        return targetKey(e)
      } else {
        return e.key === targetKey
      }
    }
    const downHandler = (e) => {
      tester(e) && setKeyPressed(e.key)
    }
    const upHandler = (e) => {
      tester(e) && setKeyPressed(null)
    }
    window.addEventListener("keydown", downHandler)
    window.addEventListener("keyup", upHandler)
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener("keydown", downHandler)
      window.removeEventListener("keyup", upHandler)
    }
  }, [])
  return keyPressed
}