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 |