Infinite Scroll

import { NCard, NInfiniteScroll, NLoading } from '@nayan-ui/react';
import React, { useState } from 'react';

const InfiniteScroll = () => {
  const [items, setItems] = useState(new Array(20).fill(''));
  const [isFetching, setIsFetching] = useState(false);

  const fetchNextPage = () => {
    setIsFetching(true);
    setTimeout(() => {
      const newItems = [...items, ...new Array(20).fill('')];
      setItems(newItems);
      setIsFetching(false);
    }, 2000);
  };

  return (
    <NInfiniteScroll
      next={() => !isFetching && fetchNextPage()}
      hasMore={true}
      loader={<NLoading />}
      dataLength={items.length}
      scrollThreshold={0.99}>
        {items.map((item: any, index: number) => (
          <NCard className="p-3 mb-3">Item {index}</NCard>
        ))}
    </NInfiniteScroll>
  );
};

export default InfiniteScroll;