PullToRefresh
pull-to-refreshTracks a resisted downward pull, arms at a threshold, and holds until refresh completes.
Usage
Basic usage
When the scroll container is on top, the pull-down triggers refresh, and the Promise returned by onRefresh remains refreshed until the end.
Pull to refresh
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
tsx
<div className="h-56 overflow-hidden rounded-[var(--radius)] border border-border bg-surface">
<PullToRefresh
onRefresh={async () => {
await load();
}}
className="h-full"
>
<List />
</PullToRefresh>
</div>Custom threshold
threshold To increase the value, you need to pull it down deeper to trigger, which is suitable to avoid accidental touches.
Pull to refresh
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
tsx
<PullToRefresh onRefresh={refresh} threshold={96} className="h-full">
<List />
</PullToRefresh>Custom copywriting
pullingText / armedText / refreshingText can be changed to business semantic copywriting.
Continue to scroll down
List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
tsx
<PullToRefresh
onRefresh={refresh}
pullingText="Continue to drop down"
armedText="Release to update"
className="h-full"
>
<List />
</PullToRefresh>When to Use
Used when the scrollable list/page is on top and the pull-down triggers data refresh. Use SwipeAction to slide the list row horizontally to reveal the action button; this component only performs the vertical pull-down to refresh gesture.
Import
ts
import { PullToRefresh } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
threshold | number | 64 | Pull-down threshold px to trigger refresh |
resistance | number | 0.5 | Pull-down damping coefficient (0-1, the smaller it is, the "heavy" it is) |
className | string | — | — |
Events
| Event | Type | Description |
|---|---|---|
onRefresh * | () => Promise<void> | void | Trigger the refresh callback; remain "refreshing" during the return of Promise, and rebound after the end |
Slots
| Slot | Type | Description |
|---|---|---|
children * | ReactNode | Scrollable content |
pullingText | ReactNode | Pulling-state content; defaults to the locale value and explicit content takes precedence. |
armedText | ReactNode | Armed-state content; defaults to the locale value. |
refreshingText | ReactNode | Refreshing-state content; defaults to the locale value. |
Usage Guidelines
- To keep the indicator visible while loading,
onRefreshmust return a promise that resolves after the data is ready. Returning void rebounds immediately. - The pull-down gesture is only entered when the content is scrolled to the top, and will not be accidentally triggered during scrolling.
- All three state labels follow
ConfigProvider locale;enUSprovides English labels, and the no-provider fallback remains Chinese.
Related
SwipeAction · TabBar · Fab · ActionSheet · Picker · SafeArea