useKeyCapture alternatives and similar libraries
Based on the "Keyboard Events" category.
Alternatively, view useKeyCapture alternatives based on common mentions on social networks and blogs.
-
react-keyboard-navigator
A suite of React components and hook for selecting sibling components through the keyboard.
Do you think we are missing an alternative of useKeyCapture or a related project?
README
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.