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:

``bash $ npm i react-pull-to-refreshify

`or`


$ yarn add react-pull-to-refreshify


Usage

`tsx function renderText(pullStatus, percent) { switch (pullStatus) { case "pulling": return (

Pull down

}
          {

${percent.toFixed(0)}%


      );
    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);
}
  refreshing={refreshing}
  onRefresh={handleRefresh}
  renderText={renderText}
>
  {list.map((item, i) => (
    
{item}

  ))}
;


Examples
- Basic
- Max Height
- Load more
- animation 1
- animation 2
Props

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

or

$ yarn add react-pull-to-refreshify

Usage

tsx
function renderText(pullStatus, percent) {
  switch (pullStatus) {
    case "pulling":
      return (

Pull down

}
          {

${percent.toFixed(0)}%

);

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);
}

refreshing={refreshing}
onRefresh={handleRefresh}
renderText={renderText}
>
{list.map((item, i) => (

{item}

))}
;

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