/react-hook-intersection-observer

A simple React hook that works with the Intersection Observer API.

Primary LanguageJavaScriptMIT LicenseMIT

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

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

Then, using this is as simple as:

Edit react-hook-intersection-observer

import React, { useRef, 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!