react-hooks-pull-to-refresh

The pull-to-refresh user interface pattern implemented with React Hooks.

Installation

npm:

npm install react-hooks-pull-to-refresh --save

yarn:

yarn add react-hooks-pull-to-refresh

Requirement

You need to install the following peerDependencies into your project at the same time:

{
  "peerDependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "styled-components": ">= 4.1.4 || >= 5.0.0"
  }
}

Usage

import React, { useState } from 'react';
import { usePullToRefresh } from 'react-hooks-pull-to-refresh';

function MyComponent() {
  const [dataSource, setDataSource] = useState<string[]>([]);

  const onRefresh = async (): Promise<void> => {
    const res = await fetch('/api/to/something');
    if (res.ok) {
      const { data } = await res.json();
      setDataSource(data);
    }
  };

  const refresherRef = usePullToRefresh(onRefresh);

  return (
    <ul ref={refresherRef}>
      {dataSource.map((it, idx) => (
        <li key={`item_${idx}`}>{it}</li>
      ))}
    </ul>
  );
}

Document

storybook