CODEWITHSUNDEEP
reactjsintersection-observeruse-ref
derek _
derek _

Reputation: 29

intersection observer with react components

I'm trying to figure out how I can use the intersection observer to work with components. For instance if I use:

  <div ref={containerRef}>
    Observe me and see what happens...
  </div>

everything works fine. But as soon as I use the ref for a component it stops working. Like this:

<Component ref={containerRef}/>

I have no clue how to fix this, i assume i'm just overlooking something, but i don't know what. Below all the code:

// App.js

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import Comp3 from "./compy3";

function App() {
  // * INTERSECTION OBSERVER
  const [containerRef, isVisible] = useElementOnScreen({
    root: null,
    rootMargin: "0px",
    threshold: 0.5,
  });
  const [containerRef2, isVisible2] = useElementOnScreen({
    root: null,
    rootMargin: "0px",
    threshold: 0.5,
  });
  const [containerRef3, isVisible3] = useElementOnScreen({
    root: null,
    rootMargin: "0px",
    threshold: 0.5,
  });

  return (
    <div className="app">
      <div className="isVisible">
        {isVisible ? "1 IN VIEWPORT  " : "1 not in viewport   "}
        {isVisible2 ? "2 IN VIEWPORT  " : "2 not in viewport   "}
        {isVisible3 ? "3 IN VIEWPORT  " : "3 not in viewport   "}
      </div>
      <div className="section"></div>
      <div className="box" ref={containerRef}>
        Observe me and see what happens
      </div>
      <div className="box2 box" ref={containerRef2}>
        Observe me and see what happens 2
      </div>
        <Comp3 ref={containerRef3} />
    </div>
  );
}

export default App;

// * INTERSECTION OBSERVER LOGIC
const useElementOnScreen = (options) => {
  const containerRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  const callbackFunction = (entries) => {
    const [entry] = entries;
    setIsVisible(entry.isIntersecting);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(callbackFunction, options);
    if (containerRef.current) observer.observe(containerRef.current);

    return () => {
      if (containerRef.current) observer.unobserve(containerRef.current);
    };
  }, [containerRef, options]);
  return [containerRef, isVisible];
};

// compy3.js

import React from "react";

function compy3() {
  return <div className="box3 box">Observe me and see what happens 3</div>;
}

export default compy3;

Upvotes: 0

Views: 1876

Answers (1)

derek _
derek _

Reputation: 29

I found a solution to my problem:

//App.js

<Component containerRef={containerRef}/>

//Component.js

function Component(props) {
  return (
    <div ref={props.containerRef} className="box3 box">
      Observe me and see what happens..
    </div>
  );
}

Upvotes: 2

Related Questions