Sometimes, we want to detect Shift + Enter press in React onKeyPress event.

In this article, we’ll look at how to detect Shift + Enter press in React onKeyPress event.

How to detect Shift + Enter press in React onKeyPress event?

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.

For instance, we write:

import React from "react";

export default function App() {
  const handleKeyPress = (e) => {
    if (e.key === "Enter" && e.shiftKey) {
      console.log("pressed shift+enter");
    }
  };

  return (
    <div>
      <input onKeyPress={handleKeyPress} />
    </div>
  );
}

to set the onKeyPress prop of the input to the handleKeyPress function.

We check if e.key is 'Enter' and e.shiftKey is true to check if shift+enter is pressed.

Therefore, if we press both keys together, we see "pressed shift+enter" logged.

Conclusion

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.