- Table of contents
- Description
- Prerequisites
- Getting Started
- Installation
- Usage
- API
- Change log
- Authors
- License
A simple React custom hook for pull-to-refresh function that support NextJs SSR.
This project requires NodeJS (version 16 or later) and React 17+
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.
- 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.
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
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>
);
}
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 triggeronRefresh
function.isDisabled
: disabling pull function in case theonRefresh
function is not ready to run.
type UsePullToRefreshReturn = {
isRefreshing: boolean;
pullPosition: number;
};
isRefreshing
: indicate refresh callback function is running.pullPosition
: current pull gesture position.
- Senbonzakura1234 - Initial work - Senbonzakura1234
MIT License © Senbonzakura1234