Use Pull To Refresh

Table of contents

• Table of contents
• Description
• Purposes
• Prerequisites
• Getting Started
  • What's the different to other similar packages?
• Installation
• Usage
• API
  • Parameters
  • Return Type
• Change log
• Authors
• License

Description

A simple React custom hook for pull-to-refresh function that support NextJs SSR.

Purposes

Lots of web application needs custom scroll area for various reasons, however since we are not using browser native scroll, the native pull to refresh API is unusable since it's tied to the scroll event on html tag. This hooks is the solution to resolve this issue by recreating the native pull top behavior while also let you choose what proccess to run on each pull event end.

Prerequisites

This project requires NodeJS (version 16 or later) and React 17+

Getting Started

This custom hook helps you implement the pull-to-refresh feature in your app. It supports NextJs SSR that some other packages don't. It also allows support of a custom Scroll Area that was created by yourself.

What's the different to other similar packages?

• react-pull-to-refresh : will run into error 'window' is not defined when using with NextJs SSR.
• react-hooks-pull-to-refresh, react-pull-updown-to-refresh, react-web-pull-to-refresh : Either being unmaintained or doesn't support Typescript, or newer version of React.
• react-native-pull-refresh-android : solution only available for react native.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

1$ npm i use-pull-to-refresh

Or if you prefer using Yarn:

1$ yarn add use-pull-to-refresh

Or if you prefer using pnpm:

1$ pnpm add use-pull-to-refresh

Usage

NextJs Example With TailwindCSS

1import { useRouter } from 'next/router';
2import { usePullToRefresh } from 'use-pull-to-refresh';
3
4const MAXIMUM_PULL_LENGTH = 240;
5const REFRESH_THRESHOLD = 180;
6
7export default function PageRefresh() {
8	const { isReady, reload } = useRouter();
9
10	const { isRefreshing, pullPosition } = usePullToRefresh({
11		// you can choose what behavior for `onRefresh`, could be calling an API to load more data, or refresh whole page.
12		onRefresh: reload,
13		maximumPullLength: MAXIMUM_PULL_LENGTH,
14		refreshThreshold: REFRESH_THRESHOLD,
15		isDisabled: !isReady
16	});
17
18	return (
19		<div
20			style={{
21				top: (isRefreshing ? REFRESH_THRESHOLD : pullPosition) / 3,
22				opacity: isRefreshing || pullPosition > 0 ? 1 : 0
23			}}
24			className='bg-base-100 fixed inset-x-1/2 z-30 h-8 w-8 -translate-x-1/2 rounded-full p-2 shadow'
25		>
26			<div
27				className={`h-full w-full ${isRefreshing ? 'animate-spin' : ''}`}
28				style={!isRefreshing ? { transform: `rotate(${pullPosition}deg)` } : {}}
29			>
30				<AnySpinnerSVGIconComponentWorksHere className='h-full w-full' />
31			</div>
32		</div>
33	);
34}

API

Parameters

1type UsePullToRefreshParams = {
2	onRefresh: () => void;
3	maximumPullLength?: number;
4	refreshThreshold?: number;
5	isDisabled?: boolean;
6};

• onRefresh (required): refresh callback function run when pull event end.
• maximumPullLength: limit how far the refresh icon was pulled down.
• refreshThreshold: pullPosition that will trigger onRefresh function.
• isDisabled: disabling pull function in case the onRefresh function is not ready to run.

Return Type

1type UsePullToRefreshReturn = {
2	isRefreshing: boolean;
3	pullPosition: number;
4};

• isRefreshing: indicate refresh callback function is running.
• pullPosition: current pull gesture position.

Change Log

• Pleach check here

Authors

• Senbonzakura1234 - Initial work - Senbonzakura1234

License

MIT License © Senbonzakura1234