This package use to call function from specific position your web
npm install infinite-scroll-actionjavascript
import InfiniteScrollAction from 'infinite-scroll-action'
import { useEffect, useState } from 'react'
function App() {
const [product, setProduct] = useState([])
const [limit, setLimit] = useState(20)
const [loading, setLoading] = useState(false)
useEffect(() => {
const apiCall = async () => {
setLoading(true)
const res = await fetch(https://dummyjson.com/products?limit=${limit}&skip=0)
const data = await res.json()
setProduct(data.products)
setLoading(false)
}
apiCall()
}, [limit])
const callback = () => {
setLimit(limit + 10)
}
return (
// If use this API call to past this realtime get data length else don't need
ifApiCallPastChangeableDataLength={product.length}
//Function call from bottom to top pixel position
bottomToActionPosition={20}
callback={callback}
>
style={{
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{!product.length && loading ? (
style={{
height: '100vh',
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
First time Loading........
) : (
product.map((item) => (
style={{
background: 'tomato',
height: '200px',
margin: '5px',
}}
>
{item.title}
{item.id}