Posted on Jun 26, 2023

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

#react #pulltorefresh #reactpulltorefresh

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