||

Pull to Refresh

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Add a resisted pull gesture, status character, and async refresh lifecycle.

pull-to-refresh-demo

Overview

Pull to Refresh is designed for touch-first, scrollable content. It turns pull distance into progress, holds the content while async work runs, and returns it after completion.

Installation
npx honestui@latest add pull-to-refresh

Usage

 
import { PullToRefresh } from "@/components/animated/pull-to-refresh"

<PullToRefresh onRefresh={loadLatest}>
  <ActivityFeed />
</PullToRefresh>

Accessibility

Do not make pull the only way to refresh; provide a visible refresh button where the action is important. Status labels are announced, and reduced motion simplifies the indicator and content movement.

API Reference
PropTypeDefaultDescription
onRefresh*() => void | Promise<void>–Runs after a completed pull.
refreshingboolean–Externally controlled refresh state.
disabledbooleanfalseDisables the gesture.
thresholdnumber76Resisted distance required to refresh.
maxPullnumber132Maximum resisted distance.
holdDistancenumber68Content offset while refreshing.
pullingLabelReactNode"Pull to refresh"Label before the threshold.
releaseLabelReactNode"Release to refresh"Label after the threshold.