Drag & physics
Pull to refresh
Pull the top of a list and a drop of liquid stretches out of the edge, its neck thinning until it snaps free at the threshold — release and it spins while you refresh.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { PullToRefresh } from '@vizzele/react';
<PullToRefresh onRefresh={() => fetchLatest()} style={{ height: 420 }}>
{items.map((item) => <Row key={item.id} {...item} />)}
</PullToRefresh>Props
| Prop | Type | Default | Description |
|---|---|---|---|
onRefresh | () => Promise | void | — | The drop spins until it settles. |
threshold | number | 72 | Pull distance that triggers (px). |
label | string | 'Refresh' | Keyboard button and announcements. |
Accessibility
- Works with touch and mouse; it only takes over the gesture at the very top of the list.
- Keyboard users get a Refresh button that appears on focus.
- Refreshing / Updated is announced in a status region, and the list is aria-busy meanwhile.