react-intersection-observer-scroll v1.0.3

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