React Infinite Scroll Observer

Inspired by component react-infinite-scroll-component .

Install

yarn add react-infinite-scroll-observer

or

npm i react-infinite-scroll-observer

Usage

How to import:

import { InfiniteScrollObserver } from 'react-infinite-scroll-observer';

Main properties:

<InfiniteScrollObserver
  onLoadNext={onFetchData}
  dataLength={items.length}
  hasMore={true}
  className='infinite-scroll-controller'
  scrollableTargetId="observable-infinite-scroll"
  loaderComponent={
    <Loader id="observable-infinite-scroll"/>
  }
>
  {items}
</InfiniteScrollObserver>

Configuration properties

Name	Type	Required	Description
children	ReactNode	true	The data items which you need to scroll
loaderComponent	ReactNode	true	A loader component to show while the component waits for the next
scrollableTargetId	String	true	HTML attribute ID of the informed loading component. Quando aparecer na tela, chamará a função onLoadNext
dataLength	Number	true	Length of the informed data. If greater than 0, will enable observation of scrollableTargetId
hasMore	Boolean	true	It tells the InfiniteScrollObserver component on whether to call onLoadNext function on reaching the end of the scroll. If value false, not show the loaderComponent
isReverse	Boolean	false	Set infinite scroll in direction top
isHideLoader	Boolean	false	If you don't want to show the loaderComponent at another time
className	Boolean	false	Add a CSS custom class
onLoadNext	Void Function	true	A function which must be called after finding the DOM element (loaderComponent) with the ID attribute of scrollableTargetId. It must trigger some sort of action which fetches the next data.

Contributing

Contributors are welcome! 🤘

Please check out the CONTRIBUTING.md.

You can also:

• 🌟 give a star in this repository
• ❣️ share this project and recommending it to your friends

Contributors

Cristian J. Ambrosi 💻 📖 👀 🚧 ✅

License

Licensed under the MIT License