Top React Hooks — Modals and Visibility

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-hooks-use-modal

The react-hooks-use-modal library lets us create a modal with ease.

To install it, we run:

npm i react-hooks-use-modal

Then we can use it by writing:

import React from "react";
import useModal from "react-hooks-use-modal";

export default function App() {
  const [Modal, open, close, isOpen] = useModal("root", {
    preventScroll: true
  });
  return (
    <div>
      <p>{isOpen ? "Yes" : "No"}</p>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div>
          <h1>Title</h1>
          <p>hello world.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
}

We use the useModal hook with some arguments.

The first argument is the ID of the element the modal attaches to.

The 2nd argument has some options.

preventScroll prevents the body from being scrolled when it’s set to true .

Then we can use the array of things it returns.

Modal has the modal component.

open is the function to open the modal.

close is the function to close the modal.

isOpen has the state to indicate whether the modal is open or not.

react-hooks-visible

The react-hooks-visible library provides us with a hook to detect the visibility of an element.

It uses the Observer API to detect the visibility of the element.

The install it, we run:

yarn add react-hooks-visible

Then we can use it by writing:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, visible] = useVisible();
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{visible * 100} % visible</p>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We use the useVisible hook to return the targetRef , which we pass into the ref prop of the element we want to watch.

visible returns the percent of the element that’s visible.

It’s updated as the visibility percentage changes.

We can also pass an argument into the hook to format the number.

For instance, we can write:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, visible] = useVisible(vi => (vi * 100).toFixed(2));
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{visible} % visible</p>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

to round the visible number to 2 decimal places.

We can also return something other than a number.

For example, we can write:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, isVisible] = useVisible(vi => vi > 0.5);
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{isVisible.toString()} </p>
      {Array(10)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We have a callback that returns a boolean expression which compares the visibility decimal to 0.5.

isVisible would be a boolean to indicate whether the element is more than half visible.

Conclusion

The react-hooks-use-modal library lets us create a modal easily.

The react-hooks-visible lets us watch for the visibility of an element.