react-intersection-observer-scroll

React lightweight, easy to use scroll typescript component. Built with Intersection Observer api, allows tracking scroll items position, state, visibility, scroll direction, etc. Could be used for list lazy loading, infinite scroll implementation, viewed items marking and so on.

Installation

# with npm
npm install react-intersection-observer-scroll

# with yarn
yarn add react-intersection-observer-scroll

Types

interface IIntersectionData {
  scrollDirection: 'up' | 'down',
  entries: IntersectionObserverEntry[],
}

Basic usage

import SmartScroll from 'react-intersection-observer-scroll'

function App() {
  const someList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // Just for example. You can wrap any content you want

  const intersectionCallback = (data: IIntersectionData) => {
    console.log('Parent scroll callback : ', data)
  }

  return (
    <div className="App">
      <SmartScroll
        wrapperId="smartScrollContainer"
        intersectionCallback={ intersectionCallback }
      >
        { someList.map((item) => <div key={ item } className="listItem" data-index={ item }>
          ITEM : { item }
        </div>) }
      </SmartScroll>
    </div>
  )
}

export default App

Props

NAME	TYPE	DEFAULT	DESCRIPTION
wrapperId?	String	rssListWrapper	Main block id. Component starts tracking this block and its children for intersections
intersectionCallback?	(scrollData: IScrollData) => any	-	Intersection event handler. Fires when child component intersect with main block and becomes hidden or visible
callbackDelay?(ms)	Number	0	Delay for calback function in milliseconds
checkViewing?	Boolean	false	If true, component stop observing item in main block after first intersection. Improves performance. Can be used with message/notifications lists, for example, when you need to check item visibility only once
threshold?	number, number[]	0	Intersection Observer constructor options param
rootMargin?	String	-	Intersection Observer constructor options param