NIPEOpen Source

Project detail

React Pull to Refresh

Alpha

Pull-to-refresh for React with scroll arbitration, resistance, threshold hysteresis, and an application-owned refresh lifecycle.

Overview

Pull-to-refresh for React with scroll arbitration, resistance, threshold hysteresis, and an application-owned refresh lifecycle.

Why it exists

It exists to coordinate downward intent, the active scroll boundary, resistance, threshold hysteresis, exactly-once refresh commitment, and settling while applications own data and errors.

Source

Capabilities

  • Scroll-boundary and direction arbitration

    Resolves the active scroll surface, tolerates fractional WebKit offsets, and rejects horizontal or upward movement before taking pointer capture.

    Source

  • Resistance and threshold hysteresis

    Coordinates resisted visual distance and threshold hysteresis without taking ownership of the feed or cache.

    Source

  • Exactly-once async commitment

    Commits an armed gesture to the application-owned refresh function exactly once and coordinates the asynchronous refreshing and settling states.

    Source

Limitations

Native refresh and device QA boundaries

Browser-native page refresh can still win without application containment, and physical-device validation remains pending beyond automated browser checks.

Source

Example

Example source
import { PullToRefresh } from '@nipe-solutions/react-pull-to-refresh'
import '@nipe-solutions/react-pull-to-refresh/core.css'

export function Inbox() {
  async function refresh() {
    await refetch()
  }

  return (
    <>
      <button type="button" onClick={() => void refresh()}>
        Refresh inbox
      </button>
      <PullToRefresh.Root onRefresh={refresh}>
        <PullToRefresh.Indicator>
          <Spinner />
        </PullToRefresh.Indicator>
        <PullToRefresh.Content>
          <Messages />
        </PullToRefresh.Content>
      </PullToRefresh.Root>
    </>
  )
}