JIYIK CN >

To detect when the Esc key is pressed in React.js:

1. Adds keydownan event listener to the document element.
2. When the user presses a key, check if the key is Esc.
3. If the key pressed was Escape, call a function or run some logic.

import {useEffect} from 'react';

const App = () => {
  const myFunction = () => {
    // your logic here
    console.log('pressed Esc ✅');
  };

  useEffect(() => {
    const keyDownHandler = event => {
      console.log('User pressed: ', event.key);

      if (event.key === 'Escape') {
        event.preventDefault();

        // 👇️ your logic here
        myFunction();
      }
    };

    document.addEventListener('keydown', keyDownHandler);

    // 👇️ clean up event listener
    return () => {
      document.removeEventListener('keydown', keyDownHandler);
    };
  }, []);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
};

export default App;

We use useEffectthe keydown hook to add a keydown event listener to the document element.

Now every time the user presses a key, keyDownHandlerthe function will be called.

KeyboardEventThe key property of the object returns the value of the key pressed by the user.

In the function, we simply check if the user has pressed Escthe key, and if so, we call a function.

The function we useEffectreturn from the hook is used to clean up the event listeners when the component unmounts.

We should always clean up any event listeners you set up to avoid memory leaks in your application.

We keydownadd the event to the document element, so whenever the document has focus, the event will be fired.

This method can be used to close a popup, modal, or run any other custom logic.

We can see the keys the user might have pressed by visiting this MDN page.

Conditions if (event.key === 'Escape') {}All operating systems are covered - Windows, Mac, Linux, Android, etc.