Top React Hooks — Keypresses and Intersection

Photo by Tierra Mallorca on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

We can use the useIntersection hook to detect whether an element is obscured or fully in view.

To use it, we can write:

import React from "react";
import { useIntersection } from "react-use";
export default function App() {
  const intersectionRef = React.useRef(null);
  const intersection = useIntersection(intersectionRef, {
    root: null,
    rootMargin: "0px",
    threshold: 1
  });
  return (
    <>
      {Array(50)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
      <div ref={intersectionRef}>
        {intersection && intersection.intersectionRatio < 1
          ? "Obscured"
          : "Fully in view"}
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius
          nisl quis nibh laoreet, vitae feugiat nisi maximus. Nullam vitae mi
          magna. Fusce lorem lacus,
        </p>
      </div>
    </>
  );
}