usePressFeedback@astryxdesign/core v0.6.2 · usePressFeedback

Usage

The touch press model every Astryx pressable uses, for a local component that paints its own press. Under a finger, CSS :active paints on the touch itself and can outlive the start of a scroll; the press model instead waits 150 ms before believing a press, cancels it the moment the finger travels 10 px or a scroll claims the gesture, never brings it back inside that gesture, answers a quick tap at the lift, and fades the release over 200 ms — the clocks a native list uses. One document-level controller does this for every marked element (installed by the first pressable to mount, removed by the last to unmount), so calling the hook adds no listener or state to your element. Under a mouse nothing changes: keep your :active rule, and drop it under @media (pointer: coarse) the way the built-in components do.

ts
import {usePressFeedback} from '@astryxdesign/core/hooks'

Best practices

GuidancePractices
Do

Spread the result on the element whose background paints the press, compose interactionOverlayStyles.pressedAlpha on it, and paint both [data-pressed="on"] and [data-pressed="fading"] as a background image of the pressed token at the press's strength: color-mix(in srgb, var(--color-overlay-pressed) calc(var(--astryx-press-alpha) * 100%), transparent). The strength is 1 on the first frame of a believed press and animates to 0 over the release, so the same declaration is the instant onset and the fade.

Do

Keep :active for the mouse and drop it under @media (pointer: coarse), so a finger sees only the press model and a mouse sees only :active.

Don't

Add a pointer listener or React state to the element to track the press; the controller already writes the attribute, and per-element listeners are what a long list cannot afford.

Don't

Call it for a control rendered by an Astryx component; those are marked already, and the innermost marked element takes the press.

Returns

FieldTypeDescription
pressableProps{'data-astryx-pressable': ''}

The marker attribute to spread on the element that paints the press. The controller writes data-pressed="on" on it while a touch press is believed and data-pressed="fading" for the release; your styles paint the pressed overlay off those arms — the pressed token at the press's strength, var(--astryx-press-alpha), which interactionOverlayStyles.pressedAlpha (from @astryxdesign/core/utils) sets to 1 while on and fades 1 → 0 over the release — and keep :active for a mouse.

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. How compatibility works.

This install URL expires with the draft preview.
bash
npx shadcn@4.19.0 add https://astryx-k9885xjjg-fbopensource.vercel.app/shadcn/hooks/use-press-feedback.json