Key Rebind Component

KeyRemapComponent.tsx

export type KeySet = Set<string>
const KeyListener = ({
  defaultText = 'Click Here',
  keys,
  setKeys
}: { defaultText?: string, keys: KeySet, setKeys: (args: KeySet) => void }) => {
  const [prevKeys, setPrevKeys] = useState<KeySet>(new Set())
  const [currentKeys, setCurrentKeys] = useState<KeySet>(new Set())
  const [listening, setListening] = useState(false)
  const prevKeysStr = prevKeys.size <= 0 ? 'Enter Key Combination' : [...prevKeys].join(', ')
  const end = () => {
    setListening(false)
    console.log('Setting keys', prevKeys)
    setKeys(prevKeys)
    setPrevKeys(new Set())
  }
  useEffect(() => {
    if (currentKeys.size <= 0 && prevKeys.size > 0 && listening) {
      end()
    }
  }, [currentKeys, listening])
  return (
    <button
      onClick={() => {
        setCurrentKeys(new Set())
        setListening(!listening)
      }}
      onKeyDown={(e) => {
        e.preventDefault()
        if (e.key === 'Escape') return end()
        setCurrentKeys(prev => new Set([...prev, e.key]))
        setPrevKeys(prev => new Set([...prev, e.key]))
      }}
      onKeyUp={(e) => {
        e.preventDefault()
        setCurrentKeys(prev => new Set([...prev].filter(k => k !== e.key)))
      }}
      onBlur={(e) => {
        end()
      }}
    >
      {listening ? prevKeysStr : defaultText}
    </button>
  )
}