1.0.2 • Published 2 years ago

infinite-scroll-hook v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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)
ParametersTypeDescription
options{ offset?: string; shouldStop?: boolean; onLoadMore?: () => Promise<void> }This is the option object
ReturnsTypeDescription
containerRefLegacyRef<HTMLElement>The ref object attach to your jsx container element
isLoadingbooleanWhether is loading or not

Also see these amazing hooks

RepoIntro
☄️ transition-hookAn extremely light-weight react transition animation hook
🧻 infinite-scroll-hookScroll down to load more never been so easy!

License

MIT