react-swipe-down-refresh

react-swipe-down-refresh

Swipe down to refresh or pull-to-refresh control for mobile web applications.

The component is built using composable utilities to give fine grain control over the swipe-refresh behavior. These building blocks could be used independently to build your own swipe-refresh control.

Components and utils

• SwipeRefreshList—React component with swipe-refresh behavior
• useSwipeRefresh—React hook that encapsulates the swipe-refresh logic
• SwipeRefreshCoordinator—UI framework agnostic implementation of the core gesture handling logic

Getting started

To start using react-swipe-down-refresh, install it via NPM

npm i react-swipe-down-refresh

# yarn
yarn add react-swipe-down-refresh

Demo

Try it online

Open in a mobile web-browser or toggle the device mode on a web-browser

Try the app online here.

Usage

Import the SwipeRefreshList component and include the styles provided in the package to get the swipe-refresh behavior. Make sure your build system supports importing .css files.

import { SwipeRefreshList } from "react-swipe-down-refresh";

// include the styles
import "react-swipe-down-refresh/lib/styles.css";

export default function App() {
  const onRefreshRequested = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => resolve(), 3000);
    });
  };

  return (
    <div>
      <SwipeRefreshList onRefresh={onRefreshRequested}>
        <div className="item">Line 1</div>
        <div className="item">Line 2</div>
        <div className="item">Line 3</div>
      </SwipeRefreshList>
    </div>
  );
}

Props

Name	Description	Required	Default
onRefresh	Callback function triggered on refresh	true	-
disabled	Disabled pull to refresh	false	false
className	CSS class to attache to the outermost div	false	-

Customization

You can customize the swipe refresh spinner look and behavior via the following the props

Name	Description	Required	Default
threshold	Minimum gesture movement displacement before swipe action is registered	false	false
onEndRefresh	Callback function triggered on refresh is complete	false	false
onStartRefresh	Callback function triggered on refresh start	false	false
slingshotDistance	The distance the refresh indicator can be pulled during a swipe gesture	false	false
progressViewOffset	The refresh indicator position during refresh	false	false
progressStrokeColor	Color of the refresh progress spinner	false	false
getScrollTopOverride	Disabled pull to refresh	false	false
overrideBrowserRefresh	Override browser pull to refresh behaviour	false	false
progressBackgroundColor	Background color of the progress spinner	false	false

Credits

• Take control of your scroll