@fleebee/react-simple-pull-to-refresh NPM

react-simple-pull-to-refresh

npm.io

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
resistance	number	false	1	Scale of difficulty to pull down
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