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.

$3

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

``sh
$ npm i use-pull-to-refresh
`

Or if you prefer using Yarn:

`sh
$ yarn add use-pull-to-refresh
`

Or if you prefer using pnpm:

`sh
$ pnpm add use-pull-to-refresh
`

Usage

$3

`jsx
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 (
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'
>
className={h-full w-full ${isRefreshing ? 'animate-spin' : ''}}
style={!isRefreshing ? { transform: rotate(${pullPosition}deg) } : {}}
>