Add event listener for entire document that detects specific key presses

Question

I want my app to detect left and right arrow key presses. I got it to work, however, I have to click on the App component for it to register. How can I handle this event without click anywhere / the entire document? How am I able to detect exactly which keys are pressed?

  // App.js

  keyHandler = e => {
    console.log(e);
  };

  render() {
    return (
      <div onKeyDown={this.keyHandler} tabIndex="0">

Mantas Giniūnas · Accepted Answer · 2020-01-17 18:50:22Z

2

window.addEventListener("click", function(event){});

You can do the same with any event, like keypress or whatever.

answered Jan 17, 2020 at 18:50

Mantas Giniūnas

7024 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Over a year ago

Thanks! I'm assuming there isn't a React event listener for this?

Mantas Giniūnas Over a year ago

No, react does not provide listener on its own. Its just not what its made for. But if you need to connect that with react you can use state whether it be class component or just functional with useState( )

Mantas Giniūnas Over a year ago

Please mark as answered if it was what you were looking for. :)

Collectives™ on Stack Overflow

Add event listener for entire document that detects specific key presses

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related