Skip to content

pranesh239/use-key-capture

Repository files navigation

Downloads

use-key-capture ⌨️

A custom hook to ease the key-press listeners of a target/global.

Check the demo here


The problem

Listening for key-press might be tedious when it comes to listening for combination keys such as Ctrl + Shift + A or the entered letter is a caps or small varient or a number.

The Solution

use-key-capture is a custom hook which will lets you not to worry about the key-press event. Just plugin in use-key-capture hook to the target you want to listen for key press event or by default it can listen for key-press event globally.It gives simple API, which helps you listen for complex key combinations with ease.

Example: Ctrl + Shift + A - useKeyCapture gives

{
    key: 'A',
    isCaps: true,
    isWithCtrl: true,
    isWithShift: true
}

installation

npm

npm i use-key-capture

yarn

yarn add use-key-capture

Usage

This same working demo is here.

import React from 'react';
import useKey from 'use-key-capture';
import './styles.css';

const displayKeys = ['Q', 'W', 'E', 'R', 'T', 'Y', 'Backspace'];

const TargetEventComponent = () => {
  /* 
    keyData - gives the data of pressed key, i.e) isCaps, isNumber, isWithShift. 
    getTargetProps - a prop getter to be given if a target (input, textarea) have 
    to be listened for key-press.
    */
  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 key={key} className={`box ${getIsActive(key)}`}>
              {key}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TargetEventComponent;

Props

keyData

It will be the most used props from useKeyCapture. It gives the key/key varient/key combinations pressed.

Property Type
key String
isEnter Boolean
isBackspace Boolean
isEscape Boolean
isCapsLock Boolean
isTab Boolean
isSpace Boolean
isArrow Boolean
isArrowRight Boolean
isArrowLeft Boolean
isArrowUp Boolean
isArrowDown Boolean
isWithShift Boolean
isWithCtrl Boolean
isWithMeta Boolean
isWithAlt Boolean
isCaps Boolean
isSmall Boolean
isNumber Boolean
isSpecialCharacter Boolean

getTargetProps

type: function({})

A prop getter to be given if a target (input, textarea) have to be listened for key-press.

resetKeyData

type: function({})

It will reset all the values in keyData props to the initial values.