A React hook that detects when the virtual keyboard is open on mobile devices.
- 📱 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
npm install use-detect-keyboard-open
# or
yarn add use-detect-keyboard-open
# or
pnpm add use-detect-keyboard-open
import { useDetectKeyboardOpen } from 'use-detect-keyboard-open';
function App() {
const isKeyboardOpen = useDetectKeyboardOpen();
return (
<div>
<p>Keyboard is {isKeyboardOpen ? 'open' : 'closed'}</p>
<input type="text" placeholder="Type something..." />
</div>
);
}
The hook uses multiple detection methods to reliably detect when the virtual keyboard is open:
- Window Size Method: Detects significant changes in window height which typically occur when the keyboard opens
- Focus Events Method: Tracks input and textarea focus/blur events to determine keyboard state
const isKeyboardOpen = useDetectKeyboardOpen();
Returns a boolean value indicating whether the virtual keyboard is currently open.
- Adjusting UI layout when keyboard appears
- Hiding elements when keyboard is visible
- Implementing custom scroll behavior for inputs
- Creating responsive forms optimized for mobile
# Clone the repository
git clone https://github.com/nnthanh01061999/use-detect-keyboard-open.git
cd use-detect-keyboard-open
# Install dependencies
npm install
# or
yarn
# or
pnpm install
npm run storybook
# or
yarn storybook
# or
pnpm storybook
npm run build
# or
yarn build
# or
pnpm build
- iOS Safari (9+)
- Android Chrome (50+)
- Other modern mobile browsers
MIT
- Created by nnthanh01061999