react-scroll-infinite v1.0.0

react-scroll-infinite ·

A react component for infinite scroll

Table of Contents

• Installation
• Examples

Installation

To install, you can use npm:

$ npm install --save react-scroll-infinite

To install, you can use yarn:

$ yarn add react-scroll-infinite

Props

Example

import axios from "axios";
import { useCallback, useEffect, useState } from "react";
import { CardPassengers, Props } from "./CardPassengers";
import InfiniteScroll from "react-scroll-infinite";

function App() {
  const [data, setData] = useState<Props[]>([]);
  const [page, setPage] = useState(0);
  const [loading, setLoading] = useState(true);
  const getPassengers = useCallback(async () => {
    setLoading(true);
    const response = await axios
      .get<{ data: Props[] }>("https://dummyapi.io/data/api/user", {
        headers: {
          "app-id": "lTE5abbDxdjGplutvTuc",
        },
        params: {
          page,
          limit: 45,
        },
      })
      .finally(() => setTimeout(() => setLoading(false), 3000));
    const users = response.data.data;

    setPage(page + 1);
    setData(page > 0 ? [...data, ...users] : users);
  }, [data, page]);

  useEffect(() => {
    getPassengers();
  }, []);
  return (
    <div className="app">
      <header>
        <h1>Users</h1>
      </header>

      <InfiniteScroll onLoad={getPassengers} variant="infinite">
        <ul>
          {data.map((user: Props) => (
            <CardPassengers key={user.id} {...user} />
          ))}
        </ul>
        {loading && <p>Loading</p>}
      </InfiniteScroll>
    </div>
  );
}