useIntersectionObserverRef

import React, { useState } from "react";
import { useIntersectionObserverRef } from "rooks";
import "./styles.css";

function App() {
  const [isThingIntersecting, setThingIntersecting] = useState(false);
  const callback = entries => {
    if (entries && entries[0]) {
      setThingIntersecting(entries[0].isIntersecting);
    }
  };
  const [myRef] = useIntersectionObserverRef(callback);

  return (
    <div className="App">
      <h1>Rooks : useIntersectionObserverRef example</h1>
      <h3>Scroll down</h3>
      <div
        style={{
          position: "fixed",
          left: "250px",
        }}
      >
        <h1>Is rectangle visible - {String(isThingIntersecting)}</h1>
      </div>
      <div style={{ height: 1500 }}></div>
      <div ref={myRef} style={{ height: 300, background: "teal" }}></div>
    </div>
  );
}

export default App;