Intersect-observer NPM

intersect-observer

Wrapped around Intersection Observer API
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

Install

npm install --save intersect-observer

Use case

In infinite scrolling you can monitor when scroll footer is in viewport. Also it can use to control the re-rendering of component which are not visible in view ports by controlling unnecessary state update

useEffect(()=>{
    if(isVisible){
        setValue(true)
    }
},[depState])

Usage

import React, { useRef } from 'react'
import { useIntersectionObserver } from 'intersect-observer'

const GetView = () => {
  const ref = useRef()
  const option = {
    root: null,
    target: ref,
    active: true,
    threshold: 0,
    rootMargin: "0px"
  }
  const [isVisiable] = useIntersectionObserver(option)
  return (
    <div ref={ref}>{isVisiable ? "In Viewport" : "Not in Viewport"}</div>
  )
}

Options

root: (Optional) Default value is null, The Element or Document whose bounds are used as the bounding box.

target: (Required) Reference (ref) of element whose visibility within the root is to be monitored.

active: (Optional) Type Boolean. false deactivate monitoring.

threshold: (Optional) Type Number.

rootMargin: (Optional) Type String Each side of the rectangle represented by rootMargin is added to the corresponding side in the root element's bounding box before the intersection test is performed.