Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA scroll area you pull down from the top to reload, with a resisting indicator, a live-region status and an always-reachable Refresh button for keyboard and mouse.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for feeds, inboxes and lists of fresh data on touch screens, where people expect to pull down to update.
Do not use it on pages without their own scroll area, for data that updates by itself, or as the only way to refresh.
import { PullToRefresh } from "@/components/ui/pull-to-refresh"<PullToRefresh
className="h-96"
onRefresh={async () => {
await reload()
}}
>
<ul>...</ul>
</PullToRefresh>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
PullToRefresh | onRefresh | () => Promise<unknown> | void | required | Load data. The indicator stays until it settles. |
PullToRefresh | threshold | number | 72 | Pull distance in px that triggers a refresh. |
PullToRefresh | labels | { pull, release, refreshing, done } | English | Status texts, announced to screen readers. |
PullToRefresh | buttonLabel | string | null | "Refresh" | Label of the keyboard button; null removes it. |
PullToRefresh | disabled | boolean | false | Turn the gesture and button off. |
The component ships with a Testing Library test (pull-to-refresh.test.tsx). The test fires touch events with a mocked scroll position to check the pull threshold, and uses the button for the keyboard route and the status text.