liaoliao666's blog

ReactPullToRefreshify - A simple react pull-to-refresh component.

liaoliao666's photo
liaoliao666
·

2 min read

Motivation

In frontend development, pull-to-refresh is a very common feature.

Although there are many libraries in React now that can implement this feature, they have some issues:

  • Most components with pull-to-refresh functionality are UI libraries, so after import a pull-to-refresh component, the entire UI library often needs to be imported, which adds unnecessary dependencies.

  • Most of these libraries have low customization options, making it difficult to customize the pull-down animation effects.

  • It requires setting the height of the pull container and cannot utilize the scrolling of the parent container. To address these issues, ReactPullToRefreshify was born.

Advantages

ReactPullToRefreshify has the following advantages👇:

  • It is a minimalist React pull-to-refresh component that does not rely on other packages.

  • It offers a higher level of customization, allowing you to easily create your own animation effects.

  • Furthermore, the compressed file size is only 2kb, making it suitable for both mobile and desktop platforms.

Installation

$ 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

Github

If you want to learn more about the implementation details, please click on the link below to view it. react-pull-to-refreshify

ReactpullToRefreshReactPullToRefreshifyReactPullToRefresh