React Hooks Lab Docz
Getting Starteduse-intersection-observeruse-mouse-positionuse-on-hoveruse-scroll-directionuse-scroll-progressuse-scroll-to-topuse-window-size

use-intersection-observer

Hook Description

White Space
Watching intersect using -200px of rootMarginTriggering multiple times
Not Yet
Watching intersect using -200px of rootMarginTriggering once
Not Yet
import React, { useRef } from "react";
import { useIntersectionObserver } from "react-hooks-lab";
const IntersectionObserver = () => {
  const containerRef = useRef(null);
  const isIntersecting = useIntersectionObserver(containerRef, { rootMargin: "-200px" });
  const containerRef2 = useRef(null);
  const isIntersecting2 = useIntersectionObserver(containerRef, { rootMargin: "-200px", triggerOnce: false });
  return (
    <>
      <div>White Space</div>
      <span>Watching intersect using -200px of rootMargin</span>
      <span>Triggering multiple times</span>
      <div ref={containerRef2}>{isIntersecting2 ? "Intersected" : "Not Yet"}</div>
      <span>Watching intersect using -200px of rootMargin</span>
      <span>Triggering once</span>
      <div ref={containerRef}>{isIntersecting ? "Intersected" : "Not Yet"}</div>
    </>
  );
};
export default IntersectionObserver;