react-swipe-down-refresh v0.1.1

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

Customization

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

Credits

• Take control of your scroll