Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pranesh239/use-key-capture

Makes listening to key press event easy.
https://github.com/pranesh239/use-key-capture

custom-hook hacktoberfest keyboard-events react react-hooks

Last synced: about 2 months ago
JSON representation

Makes listening to key press event easy.

Awesome Lists containing this project

README 

        
![Downloads](https://img.shields.io/bundlephobia/minzip/use-key-capture?style=plastic)





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.