Hopp til innhold

use­Intersection­Observer

Lar deg observere et eller flere elementer, og kalle en funksjon hver gang et av dem beveger seg inn eller ut av et område av skjermen.

Bruk

Bruk useInteractionObserver når du vil utsette lasting av innhold til det nærmer seg den synlige delen av skjermen, eller bruk den til å utløse endringer på siden ut fra hvilket innhold som er synlig. I eksemplet under skifter boksen farge ettersom det nederste avsnittet beveger seg inn og ut av det synlige området.

Live demo

useIntersectionObserver
Visning
Tema
Tetthet
const [isInViewport, setIsInViewport] = React.useState(false);

const targetRef = React.useRef(null);



const onIntersect = (entires) => {

  setIsInViewport(entires.some((entry) => entry.isIntersecting));

};

const fallback = () => console.log("IntersectionObserver not supported");

const options = { rootMargin: "0px", threshold: [0.0, 1.0] };



useIntersectionObserver(targetRef, onIntersect, fallback, options);



return (

  <div

    className="jkl"

    data-theme={isInViewport ? "dark" : "light"}

    style={{

      transitionTimingFunction: "ease",

      transitionDuration: "150ms",

      transitionProperty: "background-color, border-color",

      borderRadius: "4px",

      border: "1px solid",

      borderColor: "currentColor",

    }}

  >

    <p className="jkl-body jkl-spacing-xl--all" style={{ height: "100vh" }}>

      Scroll for å endre farge

    </p>

    <p className="jkl-body jkl-spacing-xl--all" ref={targetRef}>

      Scroll tilbake for å endre fargen tilbake

    </p>

  </div>

);

React API

Her finner du en oversikt over props på komponentene i pakken.