# react-swipe-down-refresh

> React swipe down to refresh component

Latest version **0.1.1** (published 2022-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-swipe-down-refresh
pnpm add react-swipe-down-refresh
yarn add react-swipe-down-refresh
bun add react-swipe-down-refresh
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-06-26 |
| First published | 2022-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Puneeth Shetty |
| Maintainers | puneethshetty |
| Keywords | react, hooks, refresh, swipe refresh, pull down, pull refresh, pull-to-refresh |

## Links

- npm: https://www.npmjs.com/package/react-swipe-down-refresh
- Repository: https://github.com/shettypuneeth/react-swipe-down-refresh
- Homepage: https://github.com/shettypuneeth/react-swipe-down-refresh#readme
- Issues: https://github.com/shettypuneeth/react-swipe-down-refresh/issues
- npm.io page: https://npm.io/package/react-swipe-down-refresh

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2022-06-26
- 0.1.0 — 2022-06-26

## README

# react-swipe-down-refresh

[![npm version](https://badge.fury.io/js/react-swipe-down-refresh.svg)](https://badge.fury.io/js/react-swipe-down-refresh)
[![license](https://img.shields.io/github/license/shettypuneeth/react-swipe-down-refresh.svg)](https://github.com/shettypuneeth/react-swipe-down-refresh/blob/main/LICENSE)

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

```sh
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](https://g4xc0y.csb.app/).

## 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.

```tsx
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](https://developer.chrome.com/blog/overscroll-behavior/)

---
_Source: https://npm.io/package/react-swipe-down-refresh · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._