Infinite scroll with react
You can import just InfiniteScroll component and create your own states or you can also import useInfiniteScroll hook.
import InfiniteScroll, { useInfiniteScroll } from "rinfinite-scroll"
<InfiniteScroll
page={page}
setPage={setPage}
pageCount={15}
height={350}
tolerance={150}
loadMore={loadMore}
setData={setData}
>
{data.map(item => <span>{item}<span>)}
</InfiniteScroll>
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()
}
})
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>
)
}