react-pull-to-refreshify

A simple react pull-to-refresh component with 0 dependencies. Its API design is similar to Ant Design Mobile, but it is more customizable and only 2kb after compression, suitable for both Mobile and Desktop.

---

English | 简体中文

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and should be installed as one of your project's dependencies:

$ npm i react-pull-to-refreshify
# or
$ yarn add react-pull-to-refreshify

Usage

function renderText(pullStatus, percent) {
  switch (pullStatus) {
    case "pulling":
      return (
        <div>
          {`Pull down `}
          <span style={{ color: "green" }}>{`${percent.toFixed(0)}%`}</span>
        </div>
      );

    case "canRelease":
      return "Release";

    case "refreshing":
      return "Loading...";

    case "complete":
      return "Refresh succeed";

    default:
      return "";
  }
}

const [refreshing, setRefreshing] = useState(false);

function handleRefresh() {
  setRefreshing(true);
  setTimeout(() => {
    setRefreshing(false);
  }, 2000);
}

<PullToRefreshify
  refreshing={refreshing}
  onRefresh={handleRefresh}
  renderText={renderText}
>
  {list.map((item, i) => (
    <div key={item.id}>{item}</div>
  ))}
</PullToRefreshify>;

Examples

• Basic
• Max Height
• Load more
• animation 1
• animation 2

Props

type PullStatus =
  | "normal"
  | "pulling"
  | "canRelease"
  | "refreshing"
  | "complete";

Name	Type	Required	Default	Description
refreshing	boolean	false	true	Whether to display the refreshing status
onRefresh	() => void	true		Function called when Refresh Event has been trigerred
renderText	(status: PullStatus, percent: number) => React.ReactNode	true		Function called when Refresh Event has been trigerred
completeDelay	number	false	500	The time for the delay to disappear after completion, the unit is ms
animationDuration	number	false	300	The time for animation duration, the unit is ms
headHeight	number	false	50	The height of the head prompt content area, the unit is px
threshold	number	false	Consistent with headHeight	How far to pull down to trigger refresh, unit is px
startDistance	number	false	30	How far to start the pulling status, unit is px
resistance	number	false	0.6	Scale of difficulty to pull down
prefixCls	string	false	pull-to-refreshify	prefix class
disabled	boolean	false	false	Whether the PullToRefresh is disabled
className	string	false
style	CSSProperties	false