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 | | |