npm

react-intersection-observer-scroll
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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

Package Sidebar

Install

npm i react-intersection-observer-scroll

Weekly Downloads

0

Version

1.0.3

License

MIT

Unpacked Size

42.1 kB

Total Files

6

Last publish

Collaborators

  • avesheva