*** Multiple key detection in React ***

useAllKeysPress

There is already a great solution for making key input detection easy to implement in React, however useAllKeysPress elegantly combines single and multiple key inputs into one simple Hook.

🚀 Features

• Detect keys pressed when focused on html elements such as input,textarea,div etc.
• Detect keys pressed in order.

🌟 Installation

You can either download or copy the useAllKeysPress.js file into the directory of your project then import it into your application.

importuseAllKeysPressfrom'./components/useAllKeysPress'

🌠 Example

Single key Usage

importReactfrom"react";importuseAllKeysPressfrom'./hooks/useAllKeysPress';functionApp(){// Call our hook for each key that we'd like to monitorconstzombyPress=useAllKeysPress({userKeys:'z'});constlovePress=useAllKeysPress({userKeys:'l'});constbrainPress=useAllKeysPress({userKeys:'b'});return(<div><div>{zombyPress&&'Z'}{lovePress&&'L'}{brainPress&&'B'}</div><div>{zombyPress&&'🧟'}{lovePress&&'🧡'}{brainPress&&'🧠'}</div></div>);}

🌌 Options:

✅ {userKeys: '*'}

This configuration is for single key press detection, simply input the KeyboardEvent.key value for the selected key.

// Lettersconstnaughty=useAllKeysPress({userKeys:'n'});// ArroW keysconstup=useAllKeysPress({userKeys:'ArrowUp'});constdown=useAllKeysPress({userKeys:'ArrowDown'});constleft=useAllKeysPress({userKeys:'ArrowLeft'});constright=useAllKeysPress({userKeys:'ArrowRight'});// Numbersconstone=useAllKeysPress({userKeys:'1'});consttwo=useAllKeysPress({userKeys:'2'});consttwo=useAllKeysPress({userKeys:'3'});// etc..

✅ {userKeys: ['*','*']}

This configuration is for multiple key press detection, simply input the KeyboardEvent.key values into an array for selected keys detection.

// Any configurationconsthojo=useAllKeysPress({userKeys:['h','j']});constwalk=useAllKeysPress({userKeys:['w','a','l','k']});conststepRight=useAllKeysPress({userKeys:['Shift','ArrowRight']});// etc..

✅ {userKeys: '*', ref: *}

This configuration allows you to attach key detection when the user is focused on elements such as input, textarea, div etc.

importReact,{useRef}from"react";importuseAllKeysPressfrom'./hooks/useAllKeysPress';functionApp(){constinput=useRef(null);// Call our hook for each key that we'd like to monitorconstup=useAllKeysPress({userKeys:'ArrowUp'});return(<div><div><inputtype="text"ref={input}/></div><div>{up&&'🦾🧒🦿🧐'}</div></div>);}

✅ {userKeys: ['*','*'], order: true}

This configuration will only return true if the keys are pressed in the corresponding order.

importReactfrom"react";importuseAllKeysPressfrom'./hooks/useAllKeysPress';functionApp(){// Call our hook for the array of keys that we'd like to monitor// These keys must be pressed in order for a 'true' result.consteasyAs=useAllKeysPress({userKeys:['a','b','c'],order:true});return(<div><div><h4>All you gotta do is repeat after me</h4><h3>A B C</h3>{easyAs&&<h3>Easy as 1, 2, 3'</h3>}</div><div>{easyAs&&'🧡💃💃💃🧡'}</div></div>);}

Demos

1. Single key

2. Key on focused element

3. Multiple keys

4. Multiple keys in order

---

know issues

You may come across situations where certain combination of keys pressed do not work. This is a hardware specfic issue which unfornately goes beyond the scope of useAllkeysPress for further information please read the article below:

• Limitations of the keyboard

❤️ Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

🙏 Acknowledgements

• usehooks.com Easy to understand React Hook recipes by Gabe Ragland
• useMultiKeyPress - A React Hook recipe that detects multiple keys at once by Joe Hsu

📘 License