The hook situation

Imagine you're adding user modals to your application and you want to enhance the user experience further by introducing keyboard shortcuts to open and close these modals effortlessly.

Here's where the useKey hook comes into play! With this hook at your disposal, you can effortlessly handle key presses and perform specific actions based on the pressed keys, all to enhance the modal experience for your users.

Picture this: You have a series of user modals, each serving a unique purpose, like displaying notifications, account settings, or a help center. You want to make it super intuitive for your users to access and dismiss these modals using keyboard shortcuts.

When a user presses a designated key, let's say the "M" key, the "useKey" hook springs into action! It detects the "M" key press and triggers the opening of the desired modal. It's like magic! The user can now effortlessly access the modals without reaching for the mouse!!

Keeping the user flow smooth, you want users to be able to close modals using another simple keyboard shortcut, let's say the "Escape" key. The "useKey" hook listens keenly for this key press and promptly dismisses the open modal. Your users will appreciate the seamless navigation without any fuss.

How to use the useKey hook

The useKey hook accepts two arguments:

1. The key you want to monitor
2. the callback function that you want to be executed when the "key" is pressed

Let's look at the following example!

In the example above we are creating a "UserModal" component that manages the state of the modal being open or closed. We use the "useKey" hook twice to listen for the "M" key press and the "Escape" key press, respectively. When the "M" key is pressed, the "openModal" function is called, which sets the "modalOpen" state to true, and the modal appears. Similarly, when the "Escape" key is pressed, the "closeModal" function is called, which sets the "modalOpen" state to false, and the modal is closed.

import { useRef, useEffect } from "react";

const useKey = (key, callback) => {
  const saved_callback = useRef(callback);

  useEffect(() => {
    saved_callback.current = callback;
  }, [callback]);

  useEffect(() => {
    const handler = (event) => {
      if (event.code !== key) return;
      event.preventDefault();
      saved_callback.current();
    };

    document.addEventListener("keydown", handler);

    return () => {
      document.removeEventListener("keydown", handler);
    };
  }, [key]);
};

import { useState } from "react";
import useKey from "./useKey";

const UserModal = () => {
  const [modalOpen, setModalOpen] = useState(false);

  // Function to open the modal
  const openModal = () => {
    setModalOpen(true);
  };

  // Function to close the modal
  const closeModal = () => {
    setModalOpen(false);
  };

  // Use the "useKey" hook to listen for the "M" key press and open the modal
  useKey("KeyM", openModal);

  // Use the "useKey" hook to listen for the "Escape" key press and close the modal
  useKey("Escape", closeModal);

  return (
    <div>
      {/* Modal Trigger */}
      <button onClick={openModal}>Open Modal (Press "M")</button>

      {/* Modal */}
      {modalOpen && (
        <div className="modal">
          <h2>User Modal</h2>
          <p>Modal content goes here...</p>
          <button onClick={closeModal}>Close Modal (Press "Esc")</button>
        </div>
      )}
    </div>
  );
};

export default UserModal;