This package will use for infinite scroll pagination in react.
Installation
npm install smatob-infinite-scroll-pagination
usage
const callback = () =>{
//fetch data
}
<InfiniteScrollPagination callback={callback} isVisible={true} loader="Loading...">
// show fetch data
</InfiniteScrollPagination>
Usage
- callback() : This is a function for fetch more data from API/function.
- isVisible : This will be set true/false. False it will stop the pagination. True continue scrolling with data
- loader : Thi is loading indicator. You can pass any type of loader (image/css/text).
Example
import React, { useState } from 'react';
import InfiniteScrollPagination from 'smatob-infinite-scroll-pagination';
function App() {
//set limit and its value
const [no, setNo] = useState(0);
// set data for showing result
const [state, setstate] = useState('');
let listItem = '';
//callback function for fetch data (it can also use API call )
const callback = () => {
if (no <= 5) {
listItem = [...Array(40).keys()].map((list) => {
return <li key={list}>Item {no * 40 + list}</li>;
});
setNo((previousNo) => previousNo + 1);
setstate((previousState) => [...previousState, listItem]);
}
};
return (
<div
style={{
width: '300px',
border: '1px solid #ccc',
margin: 'auto',
}}
>
<InfiniteScrollPagination
callback={callback}
isVisible={no <= 5}
loader="Loading..."
>
<ul>{state}</ul>
</InfiniteScrollPagination>
</div>
);
}
export default App;