DEV Community

Cover image for What key did I press?
Patrik Mäsiar
Patrik Mäsiar

Posted on

What key did I press?

I was just listening podcast about keyboard event listeners and I got an idea.

I was thinking about a mini web application that tells developers, what key did they press. I do not mean character on the keyboard. I mean, what that key did. What is hidden in the keys?

If you need some information about the key values or key codes, you need to listen to them. You need to listen to the keyboard. There are keyboard listeners in Javascript you can use.

This application is listening to keyboard events and I am handling event values and setting to state. I am using Container from react-keyboard-key package. There is also an option to use hooks. In the Container, there are maintained values and they are presenting to the user.

Examples

Support

If you liked my article, application, or project, you can support me by sharing it into the world 🌎. Thank you ♥️

The Fastest, Most Accurate API for Voice AI

Ad Image

Building an AI Agent that needs to deliver human-like conversations? | Speechmatics’ real-time ASR is available in 50 languages and can understand speech in a fraction of a second.

Try Free

Top comments (0)

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay