---
title: "30 seconds of code"
url: https://daily.dev/posts/30-seconds-of-code-enx2fudni
source_url: https://www.30secondsofcode.org/react/s/use-key-press
type: article
source: "30 seconds of code"
published: 2021-09-07T18:49:26.531Z
updated: 2021-10-07T14:17:10.317Z
tags: ["general-programming"]
reading_time: 1
upvotes: 11
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 30 seconds of code

**[30 seconds of code](https://daily.dev/sources/30seconds)** · 1 min read · 11 upvotes · 0 comments

## Summary

Use the useState() hook to create a state variable that holds the pressed state of the given key. Define two handler functions that update the state variable on key down or key up accordingly. Use the useEffect() hook and EventTarget.addEventListener() to handle the 'keydown' and 'keyup' events.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.30secondsofcode.org/react/s/use-key-press>

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 0 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments
- [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments
- [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments

---

Tags: [#general-programming](https://daily.dev/tags/general-programming)

[View this post on daily.dev](https://daily.dev/posts/30-seconds-of-code-enx2fudni)