react-reuse-hooks/src/hooks/useFocus.js

A collection of 30+ production-ready reusable React hooks for web apps, covering state, effects, media, forms, and utilities.

import { useState, useEffect, useRef } from "react";

export function useFocus() {
  const [focused, setFocused] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const onFocus = () => setFocused(true);
    const onBlur = () => setFocused(false);

    node.addEventListener("focus", onFocus);
    node.addEventListener("blur", onBlur);

    return () => {
      node.removeEventListener("focus", onFocus);
      node.removeEventListener("blur", onBlur);
    };
  }, [ref]);

  return [ref, focused];
}