Usage
Gives a Carousel iOS paging on native snap's stops: pass the value as hasSnap={useSnapPaging()}. Under a finger and on a trackpad swipe, a flick moves one view, or one item with {pages: 'item'}, and the row rests on an item's start edge. A mouse wheel keeps native snapping. Only a carousel given the value loads the paging code.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use it for a row read one view at a time, such as onboarding screens or a photo strip, where a fast flick must not skip past the next view. |
| Do | Pass {pages: 'item'} when several items show at once and each flick should move only one of them. |
| Don't | Use it for a row people scan quickly; plain hasSnap keeps native momentum, which can pass several items in one swipe. |
Parameters
| Param | Type | Description |
|---|---|---|
options | {pages?: 'view' | 'item'} (default: {pages: 'view'}) | What one flick moves. 'view' moves one view and lands on the item start edge nearest one viewport on; 'item' moves one item. A new value applies from the next flick. |
Returns
| Field | Type | Description |
|---|---|---|
| paging | Snap paging for Carousel's hasSnap. The value is the same for the component's life, and Carousel keeps the value it first attached. |
Examples
Common configurations, variations, and states.Onboarding cards in a Carousel with hasSnap={useSnapPaging()}: under a finger or a trackpad swipe, each flick moves one view and rests on a card's start edge. A switch picks one view or one card per flick through the hook's pages option.
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