React-infinite-scroll-observer NPM

React Infinite Scroll Observer

Inspired by component react-infinite-scroll-component .

Install

yarn add react-infinite-scroll-observer

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

react react-infinite-scroll infinite-scroll-observer infinite-scroll infinite scroll intersection-observer-api intersection-observer intersection observer

react react-dom react-scripts styled-components

@infinitebrahmanuniverse/nolb-react-in @everything-registry/sub-chunk-2561

1.0.0

1 year ago