useKeyboardHeight
The height of the on-screen keyboard currently covering the app, or 0 when it's hidden, for keeping footers, floating buttons and sheets above the keyboard on native and mobile browsers.
Open this page on a phone and focus the input: the readout follows the keyboard.
useKeyboardHeight({ enabled? }) returns a number of pixels; use it as a paddingBottom or bottom offset. Desktop browsers always report 0.On native it follows the keyboard show and hide events (iOS reports them before the keyboard animates), and inside a
KeyboardManagerProvider it reads that provider's metrics instead of adding listeners. On the web it measures how much of the layout viewport the keyboard covers, using visualViewport. Every instance shares one set of listeners, and static rendering sees 0.Loading demo…
import { Block, Input, Text, useKeyboardHeight } from '@plocks/ui';
export function Demo() {
const keyboardHeight = useKeyboardHeight();
return (
<Block fullWidth gap="sm">
<Input placeholder="Focus to open the keyboard" />
<Text c="muted">Keyboard: {keyboardHeight}px</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources