Inspired by component
react-infinite-scroll-component
.

Install

``bash
yarn add react-infinite-scroll-observer
`

or

`bash
npm i react-infinite-scroll-observer
`

Usage

How to import:

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

Main properties:

`tsx
onLoadNext={onFetchData}
dataLength={items.length}
hasMore={true}
className='infinite-scroll-controller'
scrollableTargetId="observable-infinite-scroll"
loaderComponent={

}
>
{items}

`

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

Cristian J. Ambrosi 💻 📖 👀 🚧 ✅

License

Licensed under the MIT License