A simple React Hook that uses the Intersection Observer API
npm install react-hook-intersection-observeruseIntersectionObserver⚠ 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:

``jsx
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 (
{!isThingIntersecting && not}{" "}
intersecting
!
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!