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

Installation

Install with yarn

yarn add infinite-scroll-hook

Or install with npm

npm install infinite-scroll-hook --save

Usage

Simple usage

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 (
    <div className="App">
      <List ref={containerRef}>
        {list.map((n) => (
          <Item key={n}>{n}</Item>
        ))}
        {isLoading && <Loading>Loading ...</Loading>}
      </List>
    </div>
  )

Offset

Will load more while scrolling hit to bottom offset '200px'

const { containerRef, isLoading } = useInfiniteScroll({offset: '200px'})
...

All css size units available

• offset: 200px ✅
• offset: 20% ✅
• offset: 20vh ✅
• offset: 20cm ✅
• ...

Stop load more

Stops when finished

const { containerRef, isLoading } = useInfiniteScroll({shouldStop: isFetchEnd})
...

return (
    <div className="App">
      <List ref={containerRef}>
        {list.map((n) => (
          <Item key={n}>{n}</Item>
        ))}
        {(isLoading || !isFetchEnd) && <Loading>Loading ...</Loading>}
      </List>
    </div>
  )

API Reference

  const {containerRef, isLoading} = useTransition(options)

| Parameters | Type | Description | | :--------- | :---------------------------------------------------------------------------- | :------------------------ | | options | { offset?: string; shouldStop?: boolean; onLoadMore?: () => Promise<void> } | This is the option object |

| Returns | Type | Description | | :------------- | :----------------------- | :-------------------------------------------------- | | containerRef | LegacyRef<HTMLElement> | 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