Makes listening to key press event easy.

Last update: Dec 3, 2021

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.

GitHub

https://github.com/pranesh239/use-key-capture
You might also like...

Periqles is a React component library for Relay and Apollo that makes it easy to collect user input.

Periqles is a React component library for Relay and Apollo that makes it easy to collect user input.

periqles Painless forms for GraphQL. Demo → Periqles is a React component library for Relay and Apollo that makes it easy to collect user input. Periq

Mar 24, 2022

GlitchWave - an open-source frontend project. It makes our life easy to work on the admin panel

GlitchWave - an open-source frontend project. It makes our life easy to work on the admin panel

GlitchWave is an open-source frontend project. It makes our life easy to work on the admin panel. No more work from scratch. Work with pre maid admin panel. Easy to customize, add, remove features.

May 14, 2022

An easy-to-use keyboard event react component, Package size less than 3kb

An easy-to-use keyboard event react component, Package size less than 3kb

An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb

May 5, 2022

React hooks for easy event listener management.

React hooks for easy event listener management.

Feliz.UseListener This library exposes React hooks for adding event listeners while ensuring that the lifecycle and dependcies are all correctly manag

Aug 31, 2021

React hook which syncs localStorage[key] with the comp.

React hook which syncs localStorage[key] with the comp.

@rehooks/local-storage React hook for enabling synchronization with local-storage. API Docs can be found here. Table of Contents @rehooks/local-storag

May 8, 2022

React component to handle keyboard events :key:

react-key-handler 🔑 React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Apr 18, 2022

Android's Native key value storage system in React Native

React Native Shared Preferences Android's Native key value storage system in React Native Installation RN 0.47 npm install react-native-shared-prefe

May 5, 2022

redis like key-value state management solution for React

jedisdb redis like key-value state management solution for React Reactive. Redux alternative. Simple and powerful global state management system, acce

Apr 28, 2022

MMKV - ⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!

MMKV - ⚡️ The fastest key/value storage for React Native. ~30x faster than AsyncStorage!

MMKV is an efficient, small mobile key-value storage framework developed by WeChat. react-native-mmkv is a library that allows you to easily use MMKV inside your React Native applications. It provides fast and direct bindings to the native C++ library which are accessible through a simple JS API.

May 18, 2022

Realm is a mobile database: an alternative to SQLite & key-value stores

Realm is a mobile database that runs directly inside phones, tablets or wearables. This project hosts the JavaScript versions of Realm. Currently we s

May 13, 2022

A simple, performance oriented key value storage for React Native. Drop in replacement for AsyncStorage

react-native-fast-storage react-native-fast-storage is a drop in replacement for AsyncStorage. This library is the React Native implementation of http

Jan 1, 2022

React-generate-unique-key-for-map - Create unique keys for map elements that don't have unique property

React generate unique key for map Small helper library to generate unique keys f

Feb 20, 2022

A react-native library to secure api credentials(URL, Key, Secret) from exposing to source control and bundle in apk files.

A react-native library to secure api credentials(URL, Key, Secret) from exposing to source control and bundle in apk files.

Mar 3, 2022

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO Next SEO is a plugin that makes managing your SEO easier in Next.js projects. Pull requests are very welcome. Also make sure to check out the

May 15, 2022

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

Apr 16, 2022

This is a React application for managing books you want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.

This is a React application for managing books you  want to read. It tracks your progress and makes the reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux.

This is a React application for managing books you want to read. It tracks your progress and makes reading the books enlisted as a goal. The project is built using HTML, CSS, JavaScript, React, and Redux

Oct 17, 2021

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

A Hyperlink  component for react-native that makes urls, fuzzy links, emails etc clickable

react-native-hyperlink A Hyperlink / component for react-native & react-native-web that makes urls, fuzzy links, emails etc clickable Installation n

Apr 16, 2022

Provides a React Native context that makes it easier to manipulate the scroll offset of a ScrollView in the app

Provides a React Native context that makes it easier to manipulate the scroll offset of a ScrollView in the app. This is mostly intended for when you have a single root ScrollView. This lets deeply nested children know the offset of the ScrollView and lets them change the root ScrollView's offset via a function without passing down props through many levels of children.

Oct 24, 2021

React components that makes it easier to use LiveKit in a React app.

LiveKit React Component Library This package provides React components that makes it easier to use LiveKit in a React app. Install npm install --save

May 16, 2022
Comments
  • 1. payload for reset key not added

    @pranesh239 I think in your code the payload function for the reset key is not been added. if this issue is valid then please assign me to this one I would like to contribute to this by adding the reset key payload action. also which one is the reset key as all the keys including the escape key has been used. And please add hacktoberfest tag if the issue is valid. if this is not valid then sorry for the misunderstanding and in that case I would like to learn what mistakes I have done?

    Reviewed by saurabh-172 at 2020-10-11 09:21
  • 2. reset key functionality added

    I have made some changes please check them and if they are wrong please help me understand what went wrong. Now according to the steps you mentioned, I have pushed this code to my branch.

    Reviewed by saurabh-172 at 2020-10-09 02:05
React component to handle keyboard events :key:

react-key-handler ?? React component to handle keyboard events (such as keyup, keydown & keypress). Testimonials “Happy to see that react-key-handler

Apr 18, 2022
Niue is a tiny shared state and event library for React

Niue is a small library (~1.3kb before compression) that provides a simple way to manage your React app's shared state and send events between components.

May 16, 2022
Makes listening to key press event easy.

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

Dec 3, 2021
Decentralized-Public-Key-Infrastructure - A decentralized Public Key Infrastructure using Truffle and React Bootstrap
Decentralized-Public-Key-Infrastructure - A decentralized Public Key Infrastructure using Truffle and React Bootstrap

Decentralized-Public-Key-Infrastructure A decentralized Public Key Infrastructur

Apr 2, 2022
Club-Event-Calendar-Webpage-Demo - Webpage Demo for Club Event Calendar

Club Event Calendar Webpage Demo Demo Repository for Club Event Calendar Webpage

Jan 9, 2022
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.
 :raised_hands:  A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.

react-native-masonry ?? An easy to use, pure JS react-native component to render a masonry~ish layout for remote images react-native-masonry is built

May 11, 2022
A library for emitting and listening to events in a React application.

react-event-hook A library for emitting and listening to events in a React application. The idea for this package came from a Tweet by @pedronauck. In

May 1, 2022
Object Press - A free headless cms built with React
Object Press - A free headless cms built with React

An awesome way to jumpstart your way into the Jamstack! Object Press is a FREE headless content management system. Main Features 99.99% UP time for al

Apr 29, 2022
Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills
Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills

Key-racing is a simple and easy-to-use keyboard trainer that help you master ten-finger typing skills

Dec 25, 2021
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Feb 5, 2022