feat(onKeyStroke): listen to multiple keys

[heyitsarpit]

This PR adds the ability to listen to multiple key for onKeyStroke.
This simply adds a parameter type of string[] so the previous API is still valid and the PR is not a breaking change.

Example:

import { onKeyStroke } from '@vueuse/core'

// Previous API
onKeyStroke('ArrowDown', (e) => {
  e.preventDefault()
})

// Now possible to pass an array of keys
onKeyStroke(['w', 'W', 'ArrowUp'], (e) => {
  e.preventDefault()
})

[maxrks]

How to listen to key with modifier key, i.e. Ctrl + C or Ctrl + Esc?

[heyitsarpit]

How to listen to key with modifier key, i.e. Ctrl + C or Ctrl + Esc?

Hey @maxrks, the function doesn't handled strings with modifier keys, so "Ctrl + C" will not work, there are two work arounds I can think of.

• Use the event object, onKeyStroke a takes a callback as a parameter which has a KeyboardEvent object as an argument. It contains data on which extra keys were active when the key was pressed. You can see properties like metaKey, ctrlKey altKey etc to indicate whether they were active or not.

  {
    altKey: false,
    ctrlKey: false,
    metaKey: false,
    shiftKey: true,
    bubbles: true,
    cancelBubble: false,
    cancelable: true,
    charCode: 0,
    code: 'KeyW',
    composed: true,
    currentTarget: null,
    defaultPrevented: true,
    detail: 0,
    eventPhase: 0,
    IsComposing: false,
    isTrusted: true,
    key: 'W',
    keyCode: 87,
    layerX: 0,
    layerY: 0,
    location: 0,
    rangeOffset: 0,
    rangeParent: null,
    repeat: false,
    returnValue: false,
    timeStamp: 17335,
    type: 'keydown'
  }

• Another approach would be to combine usekeymodifier with onKeyStroke to check which key is currently active.

[ivodolenc]

How to listen to key with modifier key, i.e. Ctrl + C or Ctrl + Esc?

I also came across due to multiple keystrokes at the same time 😀

Here is a simple example:

⇧ + ⌘ + k

import { onKeyStroke } from '@vueuse/core'

onKeyStroke(e => {
  // Shift + Command + k
  if (e.shiftKey && e.metaKey && e.key === 'k') {
    e.preventDefault()

    console.log('Multiple keys are pressed!')
  }
})

// Logs each keystroke
onKeyStroke(e => {
  console.log(e)
})

Btw awesome work! Cheers 👋🏻