use-key-capture ⌨️

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

> Check the > [demo](https://use-key-capture.netlify.com/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 ```js { key: 'A', isCaps: true, isWithCtrl: true, isWithShift: true } ``` ## installation **npm** ```bash npm i use-key-capture ``` **yarn** ```bash yarn add use-key-capture ``` ## Usage This same working demo is [here](https://use-key-capture.netlify.com/demo). ```jsx 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 (

Type QWERTY in the input element below. If the focus is outside the target, we won't see any change.

{displayKeys.map(key => { return (

{key}

); })}

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

			Stars	Issues	Version	Updated	Created	Size
	react-key-handler		388	6	1.2.0-beta.3	6 years ago	9 years ago
	use-key-capture				1.0.1-beta.1	5 years ago	5 years ago

react-key-handler vs use-key-capture

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past