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	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
refreshingContent	JSX.Element or string	false		Content displayed when Pulling or Fetch more has been trigerred
pullingContent	JSX.Element or string	false		Content displayed when Pulling
canFetchMore	boolean	false	false	Enable or disable fetching more feature
onFetchMore	() => Promise	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.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)

1.2.1: Remove unnecessary z-index

1.2.0: onRefresh and onFetchMore now require to be of type () => Promise

1.1.2: Bind Scroll event to Window

1.1.0: Check for "canFetchMore" value for each scroll events.

1.1.0: Add a Fetch More feature