🧻 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

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