react-hook-intersection-observer
react-hook-intersection-observer copied to clipboard
A simple React hook that works with the Intersection Observer API.
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:
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!