useKeyboardLayoutGuide@astryxdesign/core v0.7.5 · useKeyboardLayoutGuide

Usage

Experimental: this hook and everything exported from @astryxdesign/core/keyboard/experimental are outside the stable compatibility promise and may change or be removed in a patch release. The web’s UIKeyboardLayoutGuide: where the software keyboard covers the page and how it moves, for content that stays above it (a composer, a field docked at the bottom). Mobile Safari reports the keyboard once, after it starts to move, and a hide only after it ends; each transition is dated back to the keyboard’s own start, and a hide starts at the blur. Move your element from the listener with the motion subpath’s animator on uikit.springs.keyboard from transition.start, so it rides in step with the keyboard. The same subpath exports getKeyboardLayoutGuide(window) for non-React code.

ts
import {useKeyboardLayoutGuide} from '@astryxdesign/core'

Best practices

GuidancePractices
Do

Animate with {at: transition.start, reducedMotion: 'keep'} on uikit.springs.keyboard: content that follows the keyboard mirrors it, and the iOS keyboard still slides under Reduce Motion.

Do

Lift a docked element only while a keyboard is up: to > 0 ? max(0, restingBottom - (innerHeight - to)) : 0.

Don't

Read the visual viewport every frame to follow the keyboard: Safari reports one final value, so there is nothing to follow.

Don't

Rely on this API from stable product code: it is experimental and may change in a patch release.

Parameters

ParamTypeDescription
onTransition
(transition:
) => void

Called with every keyboard transition while the component is mounted: {kind, from, to, start, velocity, animated, predicted}, insets in CSS px from the bottom of the layout viewport, start on the document timeline. Read through a ref, so a new function on each render subscribes nothing new.

Returns

FieldTypeDescription
guide
| null

The window’s guide (null while rendering on a server): inset (where the keyboard rests), transition (the latest one), presentation(time) (the inset on screen at any time) and subscribe(listener).

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx.

This install URL expires with the draft preview.
bash
npx shadcn@4.19.0 add https://astryx-d5v4oz9nw-fbopensource.vercel.app/shadcn/hooks/use-keyboard-layout-guide.json