GitHub - pranesh239/use-key-capture: Makes listening to key press event easy.
source link: https://github.com/pranesh239/use-key-capture
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK