How to detect Esc Key Press in React and how to handle it

How to Detect Esc Key Press in React and How to Handle It

React is a popular JavaScript library for building user interfaces. When developing applications, it’s important to handle user interactions effectively. One common interaction is detecting when the Escape (Esc) key is pressed. In this blog post, we will explore how to detect the Esc key press in React and how to handle it.

Method 1: Using the document.addEventListener()

The first method involves using the document.addEventListener() method to listen for the keydown event on the entire document. We can then check if the key code is 27, which corresponds to the Esc key. Here’s an example:

{`import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const handleEscKey = (event) => {
      if (event.keyCode === 27) {
        // Handle the Esc key press here
      }
    };

    document.addEventListener('keydown', handleEscKey);

    return () => {
      document.removeEventListener('keydown', handleEscKey);
    };
  }, []);

  return (
    // Your component JSX
  );
};

export default MyComponent;`}

In the above code snippet, we use the useEffect() hook to add the event listener when the component mounts. We also remove the event listener when the component unmounts to prevent memory leaks.

Method 2: Using the onKeyDown Event Handler

The second method involves using the onKeyDown event handler directly on the element where you want to detect the Esc key press. Here’s an example:

{`import React from 'react';

const MyComponent = () => {
  const handleKeyDown = (event) => {
    if (event.keyCode === 27) {
      // Handle the Esc key press here
    }
  };

  return (
    

      {/* Your component JSX */}
    
  );
};

export default MyComponent;`}

In this code snippet, we attach the onKeyDown event handler to a