use-detect-keyboard-open

A React hook that detects when the virtual keyboard is open on mobile devices.

Features

• 📱 Reliably detects keyboard open/close states on mobile devices
• 🔄 Works with both iOS and Android devices
• ⚛️ Simple React hook implementation
• 📏 Multiple detection methods for better accuracy
• 💪 TypeScript support
• 📚 Storybook documentation for components

Installation

1npm install use-detect-keyboard-open
2# or
3yarn add use-detect-keyboard-open
4# or
5pnpm add use-detect-keyboard-open

Usage

1import { useDetectKeyboardOpen } from 'use-detect-keyboard-open';
2
3function App() {
4  const isKeyboardOpen = useDetectKeyboardOpen();
5
6  return (
7    <div>
8      <p>Keyboard is {isKeyboardOpen ? 'open' : 'closed'}</p>
9      <input type="text" placeholder="Type something..." />
10    </div>
11  );
12}

How It Works

The hook uses multiple detection methods to reliably detect when the virtual keyboard is open:

1. Window Size Method: Detects significant changes in window height which typically occur when the keyboard opens
2. Focus Events Method: Tracks input and textarea focus/blur events to determine keyboard state

API

useDetectKeyboardOpen

1const isKeyboardOpen = useDetectKeyboardOpen();

Returns a boolean value indicating whether the virtual keyboard is currently open.

Common Use Cases

• Adjusting UI layout when keyboard appears
• Hiding elements when keyboard is visible
• Implementing custom scroll behavior for inputs
• Creating responsive forms optimized for mobile

Development

Setup

1# Clone the repository
2git clone https://github.com/nnthanh01061999/use-detect-keyboard-open.git
3cd use-detect-keyboard-open
4
5# Install dependencies
6npm install
7# or
8yarn
9# or
10pnpm install

Development with Storybook

1npm run storybook
2# or
3yarn storybook
4# or
5pnpm storybook

Building the library

1npm run build
2# or
3yarn build
4# or
5pnpm build

Browser Support

• iOS Safari (9+)
• Android Chrome (50+)
• Other modern mobile browsers

License

MIT

Acknowledgements

• Created by nnthanh01061999