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

Question

How do I detect Esc keypress on reactjs  The similar thing to jquery     document  keyup function e         if  e keyCode    27       escape key maps to keycode  27              lt DO YOUR WORK HERE gt              Once detected I want to pass the info down components  I have 3 components out of which last active component needs to react to the escape key press   I was thinking of a kind of registering when a component becomes active   class Layout extends React Component     onActive escFunction       this escFunction   escFunction        onEscPress       if   isFunction this escFunction          this escFunction              render        return          lt div class  root  gt           lt ActionPanel onActive  this onActive bind this    gt           lt DataPanel onActive  this onActive bind this    gt           lt ResultPanel onActive  this onActive bind this    gt         lt  div gt                and on all the components  class ActionPanel extends React Component     escFunction         Do whatever when esc is pressed       onActive        this props onActive this escFunction bind this          render        return             lt input onKeyDown  this onActive bind this    gt                I believe this will work but I think it will be more like a callback  Is there any better way to handle this

User · Answer

Another way to accomplish this in a functional component, is to use useEffect and useFunction, like this:

import React, { useEffect } from 'react';

const App = () => {


  useEffect(() => {
    const handleEsc = (event) => {
       if (event.keyCode === 27) {
        console.log('Close')
      }
    };
    window.addEventListener('keydown', handleEsc);

    return () => {
      window.removeEventListener('keydown', handleEsc);
    };
  }, []);

  return(<p>Press ESC to console log "Close"</p>);
}

Instead of console.log, you can use useState to trigger something.

User · Answer

You ll want to listen for escape s keyCode  27  from the React SyntheticKeyBoardEvent onKeyDown   const EscapeListen   React createClass     handleKeyDown  function e        if  e keyCode     27          console log  You pressed the escape key                  render  function         return          lt input type  text               onKeyDown  this handleKeyDown    gt                 Brad Colthurst s CodePen posted in the question s comments is helpful for finding key codes for other keys

User · Answer

If you re looking for a document-level key event handling  then binding it during componentDidMount is the best way  as shown by Brad Colthurst s codepen example    class ActionPanel extends React Component     constructor props       super props       this escFunction   this escFunction bind this         escFunction event       if event keyCode     27            Do whatever when esc is pressed             componentDidMount        document addEventListener  keydown   this escFunction  false         componentWillUnmount        document removeEventListener  keydown   this escFunction  false         render        return             lt input  gt                Note that you should make sure to remove the key event listener on unmount to prevent potential errors and memory leaks   EDIT  If you are using hooks  you can use this useEffect structure to produce a similar effect   const ActionPanel    props    gt      const escFunction   useCallback  event    gt        if event keyCode     27            Do whatever when esc is pressed                    useEffect      gt        document addEventListener  keydown   escFunction  false        return      gt          document removeEventListener  keydown   escFunction  false                       return           lt input   gt

User · Answer

For a reusable React hook solution   import React    useEffect   from  react    const useEscape    onEscape    gt        useEffect      gt            const handleEsc    event    gt                if  event keyCode     27                   onEscape                       window addEventListener  keydown   handleEsc            return      gt                window removeEventListener  keydown   handleEsc                             export default useEscape   Usage   const  isOpen  setIsOpen    useState false   useEscape      gt  setIsOpen false

User · Answer

React uses SyntheticKeyboardEvent to wrap native browser event and this Synthetic event provides named key attribute  which you can use like this   handleOnKeyDown    e    gt      if    Enter    ArrowRight    Tab   includes e key            select item     e preventDefault        else if  e key      ArrowUp            go to top item     e preventDefault        else if  e key      ArrowDown            go to bottom item     e preventDefault        else if  e key      Escape            escape     e preventDefault

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

Examples related to javascript

Examples related to reactjs