Use Key Capture
DemoTarget ListenerGlobal ListenerDocsProps

Target Listener

Listen only for the key-press event for a particular target.

It is provided by getTargetProps props getter. If getTargetProps props getter is not provided, then it will listen for key-press event globally.

<input {...getTargetProps()} />
Type QWERTY in the input element below. If the focus outside the target, we won't see any change.
Q
W
E
R
T
Y
Backspace
import React from 'react';
import useKey from 'use-key-capture';
import './styles.css';
const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];
const TargetEventComponent = () => {
  const { keyData, getTargetProps } = useKey();
  const getIsActive = key => (keyData.key === key ? 'active' : '');
  return (
    <div className="container-target">
      <div className="message">
        Type QWERTY in the input element below. If the focus is outside the
        target, we won't see any change.
      </div>
      <input {...getTargetProps()} />
      <div className="container">
        {displayKeys.map(key => {
          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
        })}
      </div>
    </div>
  );
};
export default TargetEventComponent;

Global Listener

If no target is specified, it will listen for global event.

Press below mentioned keys to see the hook in action
Enter
Escape
Tab
ArrowUp
Shift + A
import React from 'react';
import useKey from 'use-key-capture';
import './styles.css';
const displayKeys = ['Enter', 'Escape', 'Tab', 'ArrowUp'];
const GlobalComponent = () => {
  const { keyData } = useKey();
  const getIsActive = key => (keyData.key === key ? 'active' : '');
  const getCombinedActiveClass = () =>
    keyData.key === 'A' && keyData.isWithShift ? 'active' : '';
  return (
    <>
      <div className="message">
        Press below mentioned keys to see the hook in action
      </div>
      <div className="container">
        {displayKeys.map(key => {
          return <div className={`box ${getIsActive(key)}`}>{key}</div>;
        })}
        <div className={`box ${getCombinedActiveClass()}`}>Shift + A</div>
      </div>
    </>
  );
};
export default GlobalComponent;