smatob-infinite-scroll-pagination

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;