react-use-scroll-more v0.0.5

react useScrollMore

This module exports a useScrollMore hook which triggers the fetchMore function when user scroll to the page bottom

Example

import { useScrollMore } from "react-use-scroll-more";

export function App() {
  const { data, fetching, error } = useScrollMore(
    ["apple"],
    async ({ offset }) => {
      const res = await fetch(`/api/fruits?offset=${offset}&limit=10`);
      return res.json();
    }
  );
  if (fetching) {
    return "fetching fruits...";
  }
  if (error) {
    return "error...";
  }
  return (
    <ul>
      {data.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Interface

type FetchMoreArgs = {
  offset: number;
};

type ScrollMoreOptions = {
  timeout?: number;
};

type FetchMoreFn<T> = (option: FetchMoreArgs) => Promise<T[]> | T[];

function useScrollMore<T>(
  init: T[],
  fetchMore: FetchMoreFn<T>,
  options?: ScrollMoreOptions
): {
  fetching: boolean;
  done: boolean;
  error: boolean;
  data: T[];
};