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 |