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! :metal:

Please check out the CONTRIBUTING.md.

You can also:

• :star2: give a star in this repository
• :heavy_heart_exclamation: share this project and recommending it to your friends

Contributors

License

Licensed under the MIT License