react-simple-pull-to-refresh

A Simple Pull-To-Refresh Component for React Application with 0 dependency. Works for Mobile and Desktop.

Contributing

⚠️ I don't have much time to take care of the issues at the moment.

🙏 Any help and contribution is greatly appreciated.

Demo

Click here 👍

Installation

npm i react-simple-pull-to-refresh

Usage

import PullToRefresh from 'react-simple-pull-to-refresh';

Pull To Refresh only

// ...

return (
  <PullToRefresh onRefresh={handleRefresh}>
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </PullToRefresh>
);

// ...

Pull To Refresh and Fetch More enabled

// ...

return (
  <PullToRefresh onRefresh={handleRefresh} canFetchMore={true} onFetchMore={handleFetchMore}>
    <ul>
      {list.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  </PullToRefresh>
);

// ...

Props Matrix

Name	Type	Required	Default	Description
isPullable	boolean	false	true	Enable or disable pulling feature
onRefresh	() => Promise<any>	true		Function called when Refresh Event has been trigerred
pullDownThreshold	number	false	67	Distance in pixel to pull to trigger a Refresh Event
maxPullDownDistance	number	false	95	Maximum transitionY applied to Children when dragging
resistance	number	false	1	Scale of difficulty to pull down
refreshingContent	JSX.Element or string	false	<RefreshingContent />	Content displayed when Pulling or Fetch more has been trigerred
pullingContent	JSX.Element or string	false	<PullingContent />	Content displayed when Pulling
canFetchMore	boolean	false	false	Enable or disable fetching more feature
onFetchMore	() => Promise<any>	false		Function called when Fetch more Event has been trigerred
fetchMoreThreshold	number	false	100	Distance in pixel from bottom of the container to trigger a Fetch more Event
backgroundColor	string	false		Apply a backgroundColor
className	string	false

Changelog

1.3.3: Update package.json peerDependencies to support react 18 - (From: @mjauernig)

1.3.2: Fix build issue encountered with 1.3.1

1.3.1: Fix issue preventing fixed elements to work properly - (From: @ManuDoni)

1.3.0: Add a resistance prop, that allows to adjust the pull down difficulty - (From: @joshuahiggins)

1.2.5: Fix event listenter leaks - (From: @d-s-x)

1.2.4: Fix overscroll on iOS Safari - (From: @d-s-x)

1.2.3: Add React 17+ as valid peer dependencies - (From: @Felixmosh)

1.2.2: Remove non-null assertion operators from ref.current + TouchEvent check for Mozilla - (From: @HamAndRock)

Package detail