Hook enabling focus-on-key behaviour for an element

useFocusOnKey.js

import { useEffect, useRef } from "react";

/**
 * Focus the given element when a key is pressed;
 * and unfocus it when Escape is pressed.
 *
 * e.g.
 *   const ref = useFocusOnKey('/');
 *   return <input ref={ref} />
 */
export default function useFocusOnKey(key) {
  const elementRef = useRef();

  useEffect(() => {
    function focus(event) {
      if (elementRef.current && document.activeElement !== elementRef.current) {
        elementRef.current.focus();
        event.preventDefault();
      }
    }

    function blur() {
      if (elementRef.current && document.activeElement === elementRef.current) {
        elementRef.current.blur();
      }
    }

    const onKeyDown = (event) => {
      if (event.key === key) {
        focus(event);
      } else if (event.key === "Escape") {
        blur();
      }
    };

    document.addEventListener("keydown", onKeyDown);
    return () => document.removeEventListener("keydown", onKeyDown);
  });

  return elementRef;
}