react-hook-intersection-observer

useIntersectionObserver

This simple React Hook uses the Intersection Observer API in order to relay information to your UI about whether a given element is intersecting with the viewport.

Getting Started

⚠ Caution: Hooks is an experimental proposal from the React core team and is best not to use in production yet. This project will likely become production ready when Hooks are, but for now, let it serve fun and educational purposes.

Firstly, you'll want to yarn add react-hook-intersection-observer into your project.

Then, using this is as simple as:

import React, { useState } from "react";
import { useIntersectionObserver } from "react-hook-intersection-observer";
 
const App = () => {
  const root = useRef();    // We need a ref to our "root" or our parent,
  const target = useRef();  // We need a ref to our "target" or our child-to-watch,
 
  // Let's use a bit of state.
  const [isThingIntersecting, setThingIntersecting] = useState(false);
 
  // Here's our hook! Let's give it some configuration...
  useIntersectionObserver({
    root,
    target,
 
    // What do we do when it intersects?
    // The signature of this callback is (collectionOfIntersections, observerElement).
    onIntersect: ([{ isIntersecting }]) => setThingIntersecting(isIntersecting)
  });
 
  return (
    <div className="App">
      <h1>useIntersectionObserver</h1>
      <h2>
        The thing is currently{" "}
 
        {!isThingIntersecting && <span style={{ color: "red" }}>not</span>}{" "}
 
        <span style={{ color: isThingIntersecting ? "green" : "black" }}>
          intersecting
        </span>
 
        !
      </h2>
 
 
      <div ref={root} className="black-box">
        <div className="larger-box">
          <div ref={target}>THE THING</div>
        </div>
      </div>
    </div>
  );
};

Contributing

This project is totally open for contributions. Get started by looking at the list of open issues, or by opening one and we can talk about improvements! Wooo!