🧻 infinite-scroll-hook (React)

Scroll down to load more never been so easy!

See Example in Codesandbox

- Installation
- Usage
- Simple usage
- Offset
- Stop load more
- API Reference
- Also see these amazing hooks
- License

Installation

Install with yarn

``bash
yarn add infinite-scroll-hook
`

Or install with npm

`bash
npm install infinite-scroll-hook --save
`

Usage

$3

`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 (


)

`

$3

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 ✅
- ...

$3

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 |

Also see these amazing hooks

| Repo | Intro |
| :------------------------------------------------------------------------ | :-------------------------------------------------------- |
| ☄️ transition-hook | An extremely light-weight react transition animation hook |
| 🧻 infinite-scroll-hook | Scroll down to load more never been so easy! |

License

MIT