Hooks

useKeyboardInset

Tracks the on-screen keyboard and writes --kb-height (+ --vv-offset-y) onto a target element so a footer can ride above it. Layer 1 is the VirtualKeyboard API (Chromium/Android); layer 2 is a visualViewport fallback with an iOS-only pre-raise + rAF poll that sidesteps Safari's first-tap scroll bounce. IMessageThread wires this for you.

Usage

import { useKeyboardInset } from "imessage-ui";

const rootRef = useRef<HTMLDivElement>(null);
useKeyboardInset(rootRef); // pass null to disable

// CSS on the root:
// padding-bottom: var(--kb-height, 0px);

API reference

useKeyboardInset(target: RefObject<HTMLElement | null> | null): void

Writes --kb-height and --vv-offset-y custom properties onto target.current while a text field is focused, and resets them on blur/unmount. Passing null disables tracking.