Usage
Experimental: this hook may change or be removed in a patch release. The one answer to "is this a touch presentation?" that Astryx's adaptive components share, so a menu, a selector and a sheet never disagree on one device. It is SSR-safe: it renders the server default, then updates after hydration and when the conditions change (a window resized, a mouse attached). An iPad mini in portrait is not compact and keeps anchored popovers; a phone in landscape is compact. readTouchPresentation() reads the same answer once, for a decision taken at one moment, such as how a menu presents as it opens. For styles, write the same queries as media keys (@media (pointer: coarse)), so the first paint is already right.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Choose touch behaviors on isTouch, layout on isCompact, and sheet-versus-popover on isCompactTouch. |
| Do | Pass a serverDefault when the server knows the device, to avoid a layout change after hydration. |
| Don't | Write your own phone media query; components would disagree about the same device. |
Parameters
| Param | Type | Description |
|---|---|---|
serverDefault | {isTouch?: boolean; isCompact?: boolean} | What to render before hydration, where no media query can be read (for example from a user-agent hint). Both default to false. |
Returns
| Field | Type | Description |
|---|---|---|
| isTouch | boolean | The primary pointer is coarse, a finger: |
| isCompact | boolean | The viewport is compact: narrower than 744px or shorter than 500px, the closest a size gets to UIKit's compact size class. Key layout on it. |
| isCompactTouch | boolean | Both, for presentations that need both, such as a bottom sheet in place of a popover. |
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