Neutrinos Peludos Magnéticos

    super-react-infinite-scroll

    1.0.1 • Public • Published

    super-react-infinite-scroll

    Often wondered how facebook or instagram lazily loads data on page scroll and show loading animation?

    Well this library provides you with the react component to show loaders while you do API calls or any other async operations.

    Installation

    Use npm to install super-react-infinite-scroll

    npm install super-react-infinite-scroll
    

    Usage

    First import super-react-infinite-scroll in to your project

    import SuperReactInfiniteScroll from 'super-react-infinite-scroll';
    
    
    const dataList = [
     <p> item1 </p>,
     <p> item2 </p>
    ];
    
    const onScrollComplete = () =>{
      console.log('DO API call and get more data');
    };
    
     <SuperReactInfiniteScroll
            loaderElem={<p> Loading..</p>}        
            onScrollComplete={onScrollComplete}
            dataList={dataList}
            totalDataLength={100}
      />
    

    Refer dev/index.js to know the usage better.

    Props Usage

    Props Description Type Defaults
    loaderElem React element to render on lazy fetch React.Element
    onScrollComplete callback function which is callled when scroll comes to end Function
    dataList List of react elements to render ArrayOf(React.Element)
    totalDataLength Length of Total/final records that will be loaded Number
    scrollThresholdPercent Threshold to call onScrollComplete before scrolling till end of the page Number 95

    Run app locally

    To run the dev app locally run the following

    npm run start:dev
    

    This project is integrated with mocha and chai for unit testing. To test the code run

    npm test
    

    Install

    npm i super-react-infinite-scroll

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar