aydogansar / rinfinite-scroll

Infinite scroll with react

Import

You can import just InfiniteScroll component and create your own states or you can also import useInfiniteScroll hook.

import InfiniteScroll, { useInfiniteScroll } from "rinfinite-scroll"

Usage

<InfiniteScroll
    page={page}
    setPage={setPage}
    pageCount={15}
    height={350}
    tolerance={150}
    loadMore={loadMore}
    setData={setData}
>
{data.map(item => <span>{item}<span>)}
</InfiniteScroll>

InfiniteScroll component props

prop	type	description
page	number *	current page state
setPage	function*	set state function for page
pageCount	number*	total page count
tolerance	number	component's scroll bottom tolerance
height	number*	component's height
loadMore	function*	(page: number, search?: string) => {} load new page's data when page change
styles	object	component's custom style object
className	string	classname
setData	function*	set state function for data

If you want to use hook

It takes a single argument as object

  const { data, setData, page, setPage, search, setSearch, loadMore } = useInfiniteScroll({
    loadMore: async (currentPage) => {
      const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_page=${currentPage}&_limit=10&title_like=${search}`
    )
      return res.json()
    }
  })

useInfiniteScroll hook props

prop	type	description
initialPage	number	initial page
initialData	array	initial data
initialSearch	string	initial search
loadMore	function*	load more data current page when page change or search state change

import InfiniteScroll, { useInfiniteScroll } from "rinfinite-scroll"

const ExampleComponent = () => {
    const { data, setData, page, setPage, search, setSearch, loadMore } = useInfiniteScroll({
    loadMore: async (currentPage) => {
      const res = await fetch(
      `https://jsonplaceholder.typicode.com/posts?_page=${currentPage}&_limit=10&title_like=${search}`
    )
      return res.json()
    }
  })

  return(
    <div 
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <InfiniteScroll
        page={page}
        setPage={setPage}
        pageCount={15}
        height={350}
        tolerance={150}
        loadMore={loadMore}
        setData={setData}
      >
        <div style={{ display: "flex", flexDirection: "column" }}>
          {data.length === 0 && <span>Sonuç bulunamadı</span>}
          {data.map((item) => (
            <span
              key={item.id}
              style={{ background: "#ddd", padding: "15px", margin: "10px" }}
            >
              {item.title}
            </span>
          ))}
        </div>
      </InfiniteScroll>
    </div>
  )
}