UseKeyboard

React hooks for listen to multiple keyboard events.

General

Global keyboard events.

Preview

See code

Press ⌘S to save.

Element Event

Keyboard events listening on elements.

Preview

See code

Keyboard events are triggered only when the element is activated.

APIs

useKeyboard

type KeyboardOptions = {
  disableGlobalEvent: boolean,
  stopPropagation: boolean
  preventDefault: boolean
  capture: boolean
  event: 'keydown' | 'keypress' | 'keyup'
}

const useKeyboard = (
  handler: (event: React.KeyboardEvent) => void,
  keyBindings: Array<number> | number,
  options?: KeyboardOptions,
) => void

KeyboardOptions

Option	Description	Type	Accepted values	Default
disableGlobalEvent	disable global events from document	`boolean`	-	`false`
stopPropagation	stop event Propagation	`boolean`	-	`false`
preventDefault	block the default behavior of event	`boolean`	-	`true`
capture	set event type to "capture"	`boolean`	-	`false`
event	keyboard event type	`string`	`'keydown', 'keypress', 'keyup'`	`keydown`

Edit this page on GitHub

useInput

useMediaQuery

MADE & DESIGNED WITHBY BRUNO ANDRADE