React-infscroll-lazyload NPM

The react-infscroll-lazyload package is a component library for React, where you can easy configurate it and pass an Item component and a request to get a list with infinite scroll and lazy loading Items.

Getting started

npm install react-infscroll-lazyload

Example

import InfiniteScrollWithLazyLoad from 'react-infscroll-lazyload';
import ListItem from './components/listItem'
import Loader from './components/loader'

  const MyComponent = () => {      
    const request = async (pages) => {  
    try {
      const response = await fetch(`https://URL&page=${pages}`);
      return await response.json();
    } catch (error) {
      console.error(error);
      return false;
    }
  }
  
  return (
    <InfiniteScrollWithLazyLoad 
      Loader= {Loader}
      itemHeight = {'300px'}
      itemWidth = {'15vw'}
      iSrootVal = {null}
      iSrootMargin = '0px'
      iSthreshold = {1}
      lazyRootVal = {null}
      lazyRootMargin = '0px'
      lazyThreshold = {0.1}
      Children={Children}
      request={request}
      transformer= {(res) => res.results.map((element) => ({
          small: element.urls.thumb,
          description: element.alt_description
        })
      )}
    />
  )
}

Props

Prop name	Type	Default	Required	Description
`Loader`	Component	Default Loader	false	Custom loader component
`itemHeigth`	String	'100%'	false	Defined height for the Item and the placeholder
`itemWidth`	String	'100vw'	false	Defined weight for the Item and the placeholde
`ISrootVal`	DOM Element	null	false	The element that is used as the viewport for the infinite scroll. Must be the ancestor of the infiniteScrollWithLazyLoad component . Defaults to the browser viewport if not specified.
`iSrootMargin`	String	'0px'	false	Margin around the root, This set of values serves to grow or shrink each side of the root element's bounding box before updating the list.
`iSthreshold`	Number	1.0	false	Either a single number or an array of numbers which indicate at what percentage of the target's visibility the infinite scroll should add the next request.
`lazyRootVal`	DOM Element	null	false	The element that is used as the viewport for the Item. Must be the ancestor of the Item component. Defaults to the browser viewport if not specified.
`lazyRootMargin`	String	'0px'	false	Margin around the root, This set of values serves to grow or shrink each side of the root element's bounding box before updating the list.
`lazyThreshold`	Number	0.2	false	Either a single number or an array of numbers which indicate at what percentage of the target's visibility the infinite scroll should add the next request.
`Children`	Component	null	true	Your List Item component
`request`	Function	null	true	Your fetching handler function, get the page number as argument
`transformer`	Function	null	true	Function to transform the data for mapping it