Breaking News: Grepper is joining You.com. Read the official announcement!

perform action as the element comes in to view

Yash Jha answered on June 20, 2023 Popularity 2/10 Helpfulness 8/10

answer perform action as the element comes in to view

perform action as the element comes in to view

Comment

export default function useOnScreen(ref: RefObject<HTMLElement>) {

  const [isIntersecting, setIntersecting] = useState(false)

  const observer = useMemo(() => new IntersectionObserver(
    ([entry]) => setIntersecting(entry.isIntersecting)
  ), [ref])


  useEffect(() => {
    observer.observe(ref.current)
    return () => observer.disconnect()
  }, [])

  return isIntersecting
}

// USAGE:::
const DummyComponent = () => {
  
  const ref = useRef<HTMLDivElement>(null)
  const isVisible = useOnScreen(ref)
  
  return <div ref={ref}>{isVisible && `Yep, I'm on screen`}</div>
}

Popularity 2/10 Helpfulness 8/10 Language typescript

Source: stackoverflow.com

Tags: action element typescript view

Link to this answer
Share Copy Link

Contributed on Jun 20 2023

Yash Jha

0 Answers Avg Quality 2/10

perform action as the element comes in to view

Contents

More Related Answers

perform action as the element comes in to view

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.