Skip to content
A simple React hook that works with the Intersection Observer API.
JavaScript
Branch: master
Clone or download
Latest commit 6c0ae28 Feb 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
package.json
yarn.lock

README.md

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!

You can’t perform that action at this time.