Table of contents

• Table of contents
• Description
• 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.

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:

$ npm i use-pull-to-refresh

Or if you prefer using Yarn:

$ yarn add use-pull-to-refresh

Or if you prefer using pnpm:

$ pnpm add use-pull-to-refresh

Usage

NextJs Example With TailwindCSS

import { useRouter } from 'next/router';
import { usePullToRefresh } from 'use-pull-to-refresh';

const MAXIMUM_PULL_LENGTH = 240;
const REFRESH_THRESHOLD = 180;

export default function PageRefresh() {
	const { isReady, reload } = useRouter();

	const { isRefreshing, pullPosition } = usePullToRefresh({
		// you can choose what behavior for `onRefresh`, could be calling an API to load more data, or refresh whole page.
		onRefresh: reload,
		maximumPullLength: MAXIMUM_PULL_LENGTH,
		refreshThreshold: REFRESH_THRESHOLD,
		isDisabled: !isReady,
	});

	return (
		<div
			style={{
				top: (isRefreshing ? REFRESH_THRESHOLD : pullPosition) / 3,
				opacity: isRefreshing || pullPosition > 0 ? 1 : 0,
			}}
			className='bg-base-100 fixed inset-x-1/2 z-30 h-8 w-8 -translate-x-1/2 rounded-full p-2 shadow'
		>
			<div
				className={`h-full w-full ${isRefreshing ? 'animate-spin' : ''}`}
				style={!isRefreshing ? { transform: `rotate(${pullPosition}deg)` } : {}}
			>
				<AnySpinnerSVGIconComponentWorksHere className='h-full w-full' />
			</div>
		</div>
	);
}

API

Parameters

type UsePullToRefreshParams = {
	onRefresh: () => void;
	maximumPullLength?: number;
	refreshThreshold?: number;
	isDisabled?: boolean;
};

• 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

type UsePullToRefreshReturn = {
	isRefreshing: boolean;
	pullPosition: number;
};

• 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