Event listener for multiple keys in React?

user_13029515 0
Viewed 5245

I would like to have an event listener to detect when command+c is pressed so that I can copy something to the clipboard. How do I listen for multiple keys? I have tried something using useState, useEffect, and document.addEventListener, but it didn't work. Here is my code:

const [metaPressed, setMetaPressed] = useState(false)

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      
      if (e.key === 'Meta') setMetaPressed(true)
        
    })
  })

  useEffect(() => {
    document.addEventListener('keyup', (e) => {

      if (e.key === 'Meta') setMetaPressed(false)
      
    })
  })
reactjs dom-events event-handling javascript
2 Answers

Does it work?

useEffect(() => {
    document.addEventListener('keydown', (e) => {  
        e.preventDefault();
        if ((e.metaKey || e.ctrlKey) && e.code === 'KeyC') {
            console.log('fire!')
        }  
    })
})
user_138904230

This is how you can listen for mentioned key events

useEffect(() => {
  const callback = (event: KeyboardEvent) => {
    // event.metaKey - pressed Command key on Macs
    // event.ctrlKey - pressed Control key on Linux or Windows
    if ((event.metaKey || event.ctrlKey) && event.code === 'KeyC') {
      console.log('Pressed Command/Control + C');
    }
  };
  document.addEventListener('keydown', callback);
  return () => {
    document.removeEventListener('keydown', callback);
  };
}, []);

It's also important to always unsubscribe in React cleanup function.

Note: Do not use event.preventDefault() because that will block all user events like Control + C to copy text and that will be annoying for users.

user_15714910
Related