An Infinite Scroll component is a user interface feature that automatically loads and displays additional content as the user scrolls down a page. Instead of traditional pagination, this component creates a seamless browsing experience by continuously appending new items, such as images or articles, when the user reaches the bottom of the viewport. This enhances user engagement and keeps the content flow uninterrupted, making it ideal for applications like social media feeds, product galleries, and news websites.

# Demo

Item 0

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

# Attributes

Name	Type	Default	Details
next	function		a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. The data is passed as children to the InfiniteScroll component and the data should contain previous items too. e.g. Initial data = [1, 2, 3] and then next load of data should be [1, 2, 3, 4, 5, 6].
hasMore	boolean		it tells the InfiniteScroll component on whether to call next function on reaching the bottom and shows an endMessage to the user.
children	ReactNode[]		the data items which you need to scroll.
dataLength	number		set the length of the data.This will unlock the subsequent calls to next.
loader	ReactNode		you can send a loader component to show while the component waits for the next load of data. e.g. <h3>Loading...</h3> or any fancy loader element.
scrollThreshold	number \| string		A threshold value defining when InfiniteScroll will call next. Default value is 0.8. It means the next will be called when user comes below 80% of the total height. If you pass threshold in pixels (scrollThreshold="200px"), next will be called once you scroll at least (100% - scrollThreshold) pixels down.
onScroll	function		a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
endMessage	ReactNode		this message is shown to the user when he has seen all the records which means he's at the bottom and hasMore is false
className	string	' '	add any custom class you want.
style	object		any style which you want to override.
height	number		optional, give only if you want to have a fixed height scrolling content
scrollableTarget	string \| ReactNode		optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the InfiniteScroll component. You should provide the id of the DOM node preferably.
hasChildren	boolean		children is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your children is not an array, specify this prop to tell if your items are 0 or more.
pullDownToRefresh	boolean		to enable Pull Down to Refresh feature
pullDownToRefreshContent	ReactNode		any JSX that you want to show the user, default={<h3>Pull down to refresh</h3>}.
releaseToRefreshContent	ReactNode		any JSX that you want to show the user, default={<h3>Release to refresh</h3>}.
pullDownToRefreshThreshold	number		minimum distance the user needs to pull down to trigger the refresh, default=100px , a lower value may be needed to trigger the refresh depending your users browser.
refreshFunction	function		this function will be called, it should return the fresh data that you want to show the user.
initialScrollY	number		set a scroll y position for the component to render with.
inverse	boolean		set infinite scroll on top.

# Usage

import { NCard, NInfiniteScroll, NLoading } from 'nayan';
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;