infinite-scroll-action

$3

- Scroll to loadmore api call;
- Scroll to action function specific position your web ;

####React js

``javascript
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}

))
)}

{/ GET More Data -scroll- Loading /}
{product.length && loading ? (

style={{
height: '100px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>

Get more -- Loading........

) : null}

)
}

export default App
``

###Props

| Props | Data type | Required |
| --------------------------------- | --------- | -------- |
| callback | function | yes |
| bottomToActionPosition | number | no |
| ifApiCallPastChangeableDataLength | number | no |

###End>>=====@=====<