Skip to content

Files

Latest commit

e4eec7b Β· Mar 5, 2020

History

History
43 lines (32 loc) Β· 1.06 KB

useKeyPressEvent.md

File metadata and controls

43 lines (32 loc) Β· 1.06 KB

useKeyPressEvent

This hook fires keydown and keyup callbacks, 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.

Usage

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

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);