react-scrollified

Simple React infinite scroll component, utilizing IntersectionObserver

Demo

Install

npm install --save react-scrollified

API - ReactScrollified Props

| Option | type | default | Description | | -------------- | ----------- | ----------------- | ------------------------------------------------------------------------------------ | | hasMore | boolean | --- | got more to load? | | loader | ReactNode | --- | element to use as loader | | loadMore | function | --- | function used to load more items | | offset? | number | 0 (optional) | starting offset | | scrolledDiv? | string | window (optional) | the scrolled parent div id, !important - must have defined height. default is window |

Usage Example

import * as React from 'react'
import styles from './styles.module.css'
import ReactScrollified from './infinite-scroll/infinite-scroll'
import { useEffect, useState } from 'react'

const loader = <span>Loading...</span>

const range = (start: number, stop: number, step = 1) =>
  Array(Math.ceil((stop - start) / step))
    .fill(start)
    .map((x, y) => x + y * step)

export const ExampleComponent = () => {
  const [items, setItems] = useState<any>([])
  useEffect(() => {
    loadMore(0)
  }, [])

  const loadMore = (offset: number) => {
    //your http request here
    const newData = range(offset, offset + 100)
    setTimeout(() => {
      setItems([...items, ...newData])
    }, 400)
  }

  return (
    <div id="scrolled-div" style={{ height: '800px' }}>
      <ReactScrollified
        scrolledDiv="scrolled-div"
        hasMore={true}
        loader={loader}
        loadMore={(offset) => loadMore(offset)}
      >
        {items.map((item: any, index: any) => (
          <div key={index}>{item}</div>
        ))}
      </ReactScrollified>
    </div>
  )
}

License

MIT © iscotzan