๐งป Scroll down to load more never been so easy!
npm install infinite-scroll-hookScroll down to load more never been so easy!
- Installation
- Usage
- Simple usage
- Offset
- Stop load more
- API Reference
- Also see these amazing hooks
- License
Install with yarn
``bash`
yarn add infinite-scroll-hook
Or install with npm
`bash`
npm install infinite-scroll-hook --save
`jsx
export default function App() {
const [list, setList] = useState([...Array(11).keys()])
const { containerRef, isLoading } = useInfiniteScroll({
async onLoadMore() {
const res = await fetchList(list.slice(-1)[0])
setList(list.concat(res))
},
})
return (
`
Will load more while scrolling hit to bottom offset '200px'
`jsx`
const { containerRef, isLoading } = useInfiniteScroll({offset: '200px'})
...
All css size units available
- offset: 200px โ
offset: 20%
- โ
offset: 20vh
- โ
offset: 20cm
- โ
- ...
Stops when finished
`jsx
const { containerRef, isLoading } = useInfiniteScroll({shouldStop: isFetchEnd})
...
return (
API Reference
`js
const {containerRef, isLoading} = useTransition(options)
`| Parameters | Type | Description |
| :--------- | :---------------------------------------------------------------------------- | :------------------------ |
|
options | { offset?: string; shouldStop?: boolean; onLoadMore?: () => Promise | This is the option object |
| Returns | Type | Description |
| :------------- | :----------------------- | :-------------------------------------------------- |
|
containerRef | LegacyRef | The ref object attach to your jsx container element |
| isLoading | boolean` | Whether is loading or not || Repo | Intro |
| :------------------------------------------------------------------------ | :-------------------------------------------------------- |
| โ๏ธ transition-hook | An extremely light-weight react transition animation hook |
| ๐งป infinite-scroll-hook | Scroll down to load more never been so easy! |