Categories
React Answers

How to Listen for Key Press for Document in React.js?

Spread the love

Sometimes, we want to listen for keypresses on the whole document in React.js.

In this article, we’ll look at how to listen for keypresses on the whole document in React.js.

Listen for Key Press for Document in React.js

To listen for keypresses on the whole document in React.js, we can call addEventListener on document in the useEffect hook.

For instance, we can write:

import React, { useEffect, useRef } from "react";
const ESCAPE_KEYS = ["27", "Escape"];

const useEventListener = (eventName, handler, element = window) => {
  const savedHandler = useRef();

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const eventListener = (event) => savedHandler.current(event);
    element.addEventListener(eventName, eventListener);
    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]);
};

export default function App() {
  const handler = ({ key }) => {
    if (ESCAPE_KEYS.includes(String(key))) {
      console.log("Escape key pressed!");
    }
  };

  useEventListener("keydown", handler);

  return <span>hello world</span>;
}

We create the useEventListener hook that takes the eventName , handler , and element parameters.

eventName is the event name.

handler is the event handler function.

element is the element we call addEventListener on.

In the first useEffect callback, we set the handler as the current value of the ref to cache it.

Next, in the 2nd useEffect callback, we call element.addEventListener with the eventName and handler to listen to the eventName event.

Then we use the useEventHandler hook in App by calling it with 'keydown' and the handler function to listen to the keydown event.,

Then we get key property in handler to check which key is pressed.

Conclusion

To listen for keypresses on the whole document in React.js, we can call addEventListener on document in the useEffect hook.

One reply on “How to Listen for Key Press for Document in React.js?”

The proposed code will cause the dependencies of the first useEffect to change on every render. You should probably wrap the handler with useCallback.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.