Subscribe
Sign in
use-detect-keyboard-open
Detect mobile keyboard state in React with one simple hook
Start new thread
Thanh Nguyễn Nhựt

use-detect-keyboard-open - Detect mobile keyboard state in React with one simple hook

by
use-detect-keyboard-open is a lightweight React hook that lets you detect when the mobile keyboard is open — with just one line of code. No dependencies. TypeScript-ready. Developer-friendly.

Add a comment

Replies

Best
Thanh Nguyễn Nhựt
Maker
📌
🚀 use-detect-keyboard-open – Detect mobile keyboard visibility with one line of code Hey Product Hunt 👋 As a frontend dev building mobile-friendly UIs, I kept hitting the same annoying problem: How do you reliably detect when the mobile keyboard is open? So I built a tiny React hook to solve it. 🎯 What it does: const isKeyboardOpen = useDetectKeyboardOpen(); Works in mobile browsers ✅ No dependencies ✅ Written in TypeScript ✅ Ideal for chat UIs, input forms, floating buttons, bottom sheets, etc. 💡 Why I made it: Handling mobile keyboards is a nightmare — hidden footers, broken layouts, input fields getting blocked. This hook just works. Drop it in, and your component knows when the keyboard is open. 📦 Install npm i @thanhnn/use-detect-keyboard-open 🔗 View on npm: https://www.npmjs.com/package/@t... 🔗 View on GitHub: https://github.com/nnthanh010619... Would love feedback, issues, or contributions. If it saves you a few hours of UI debugging — mission accomplished. 🙌