useKeyPressEvent.md

useKeyPressEvent

This hook fires keydown and keyup calllbacks, similar to how useKey hook does, but it only triggers each callback once per press cycle. For example, if you press and hold a key, it will fire keydown callback only once.

这个钩子触发keydown和keydup 回调，类似于 usekey ，但在一个周期内只会触发一次回调。 例如，如果你按住一个键，它将只触发一次keydown回调。

Usage

import React, { useState } from React;
import useKeyPressEvent from 'react-use/lib/useKeyPressEvent';

const Demo = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count => ++count);
  const decrement = () => setCount(count => --count);
  const reset = () => setCount(count => 0);

  useKeyPressEvent(']', increment, increment);
  useKeyPressEvent('[', decrement, decrement);
  useKeyPressEvent('r', reset);

  return (
    <div>
      <p>
        Try pressing <code>[</code>, <code>]</code>, and <code>r</code> to
        see the count incremented and decremented.</p>
      <p>Count: {count}</p>
    </div>
  );
};

Reference

useKeyPressEvent('<key>', keydown);
useKeyPressEvent('<key>', keydown, keyup);
useKeyPressEvent('<key>', keydown, keyup, useKeyPress);