A infinite scroll component in ReactJS, using Intersection Observer API.
npm install react-infinite-scroll-observerInspired by component
react-infinite-scroll-component
.
``bash`
yarn add react-infinite-scroll-observer
or
`bash`
npm i react-infinite-scroll-observer
How to import:
`typescript`
import { InfiniteScrollObserver } from 'react-infinite-scroll-observer';
Main properties:
`tsx`
dataLength={items.length}
hasMore={true}
className='infinite-scroll-controller'
scrollableTargetId="observable-infinite-scroll"
loaderComponent={
}
>
{items}
| 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 |scrollableTargetId
| dataLength | Number | true | Length of the informed data. If greater than 0, will enable observation of |onLoadNext
| hasMore | Boolean | true | It tells the InfiniteScrollObserver component on whether to call function on reaching the end of the scroll. If value false, not show the loaderComponent |loaderComponent
| isReverse | Boolean | false | Set infinite scroll in direction top |
| isHideLoader | Boolean | false | If you don't want to show the at another time |loaderComponent
| className | Boolean | false | Add a CSS custom class |
| onLoadNext | Void Function | true | A function which must be called after finding the DOM element () with the ID attribute of scrollableTargetId`. It must trigger some sort of action which fetches the next data. |
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
Cristian J. Ambrosi 💻 📖 👀 🚧 ✅ |
Licensed under the MIT License