Fluxo UIFluxo UIv0.4.93

Pull To Refresh

Wrap any scrollable list to add the standard mobile pull-down-to-refresh gesture with promise-aware progress indicators.

Basic Usage

Pull down to refresh

Touch the panel below, drag down past the threshold, and release. Promise-aware indicator stays visible until refresh resolves.

Total refreshes: 0
import { PullToRefresh } from 'fluxo-ui';

<PullToRefresh onRefresh={async () => {
    await fetchLatest();
}}>
    {/* scrollable content */}
</PullToRefresh>

Indicator Variants

Spinner (default)

A refresh icon that rotates with pull progress and spins while refreshing.

Arrow

An arrow that flips upside down once the threshold is reached.

Drag down inside this panel to trigger a 1.2s refresh using the arrow indicator.

Dots

Three bouncing dots — minimal and unobtrusive.

Drag down inside this panel to trigger a 1.2s refresh using the dots indicator.

Minimal

Just a thin progress bar with no text label.

Drag down inside this panel to trigger a 1.2s refresh using the minimal indicator.
<PullToRefresh variant="dots" onRefresh={refresh}>
    {/* scrollable content */}
</PullToRefresh>

Custom Thresholds & Labels

Custom thresholds & labels

Raise the threshold to require a longer pull, cap the maxPull travel, and customize each indicator label.

<PullToRefresh
    threshold={90}
    maxPull={160}
    refreshingText="Syncing your inbox…"
    pullingText="Keep pulling"
    releaseText="Release to sync"
    onRefresh={sync}
>{...}</PullToRefresh>

Import

import { PullToRefresh } from 'fluxo-ui';
import type { PullToRefreshProps, PullToRefreshVariant } from 'fluxo-ui';

Props

onRefreshreq
() => void | Promise<void>

Called when the user releases past the threshold. Return a Promise to keep the spinner visible until the work completes.

childrenreq
ReactNode

Scrollable content to wrap.

threshold
number"64"

Distance in pixels the user must pull before a refresh is triggered.

maxPull
number"120"

Maximum visual pull distance (after drag resistance).

disabled
boolean"false"

Disable the gesture entirely.

variant
'spinner' | 'arrow' | 'dots' | 'minimal'"'spinner'"

Indicator style. 'spinner' rotates with pull progress, 'arrow' flips on threshold, 'dots' shows three bouncing dots, 'minimal' shows a plain bar.

refreshingText
string"'Refreshing…'"

Indicator label shown while the promise is pending.

pullingText
string"'Pull to refresh'"

Indicator label shown while pulling but before threshold.

releaseText
string"'Release to refresh'"

Indicator label shown once the threshold is reached.

className
string

Additional CSS class for the wrapper.

scrollContainer
HTMLElement | null

External scroll container to observe instead of the wrapper. Useful when the scrollable element lives below this wrapper.

Features

Touch & promise-aware

Indicator stays visible until the returned promise resolves.

Velocity dismissal

A fast flick triggers refresh even without crossing the full threshold.

Four indicator variants

spinner, arrow, dots, or a minimal bar — pick what fits the screen.

Custom labels

Localize pulling, release, and refreshing text.

External scroll container

Point at any scrollable element via scrollContainer when the scroller lives below the wrapper.

Reduced motion

Animation and inertial transitions disable themselves under prefers-reduced-motion.