Keyboard

The keyboard object provides an easy to use way to set up keys to perform different actions in your UI. It also allows you to create key combinations with ease. It also provides two properties for adding and removing key actions

.on([keyAction])

Sets up a key action. You can add multiple actions with a single .on call.

interactionManager.keyboard.on([keyAction])

keyAction

keys

Type:

type keys = string[] | number[]

The keys array are the keys that will trigger the callback. Putting multiple keys will treat them as a key combination.

For example, the following code will trigger the callback when pressing ‘A’, ‘B’ and ‘C’ keys on the keyboard at the same time

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => {},
})

Apart from using strings for keys, you can also use keycodes or the ‘KEYS’ global object.

keyboard.on({
    keys: [65, 66, 67],
    callback: () => {},
})
keyboard.on({
    keys: [KEYS.A, KEYS.B, KEYS.C],
    callback: () => {},
})

callback

Type:

type callback = (() => void) | string

The callback property is the function that will be triggered when the keys from the keys array are pressed.

You can either write your function inside the object

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => doSomething(),
});

or if you have a registered action, you can pass it here

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: 'registered-action',
});

type

Type:

type type = string[]

The type property shows the type of key interaction that the callback will be triggered on. You can pass the following interaction types: press, hold and lift.

This example will trigger the callback on a key press. If you press and hold the key it will only trigger once.

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => doSomething(),
    type: ['press']
});

This example will trigger the callback when you hold the key. If you press the key and release it immediately it won’t trigger anything.

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => doSomething(),
    type: ['hold']
});

This example will trigger the callback when you lift your finger from the key. The callback will only trigger when you release the keys.

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => doSomething(),
    type: ['lift']
});

This example will trigger the callback when you press the key and also when you hold it.

keyboard.on({
    keys: ['A', 'B', 'C'],
    callback: () => doSomething(),
    type: ['press', 'hold']
});

.off([keys])

Removes an already set up key combination.

keys

The keys array is an array of the keys involved in a key combination that you want to remove

For example if you have set up to use the ‘A’, ‘B’ and ‘C’ keys in a combination, you can remove the action by doing:

keyboard.off(['A', 'B', 'C'])

If you have added the key combination as keycodes or using the KEYS global object you need to remove them the same way:

keyboard.off([65, 66, 67])
keyboard.off([KEYS.A, KEYS.B, KEYS.C])