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
Best practices
| Guidance | Practices |
|---|---|
| Do | Animate with |
| Do | Lift a docked element only while a keyboard is up: |
| 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
| Param | Type | Description |
|---|---|---|
onTransition | (transition: ) => void | Called with every keyboard transition while the component is mounted: |
Returns
| Field | Type | Description |
|---|---|---|
| guide | | null | The window’s guide (null while rendering on a server): |
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