useKeyboard

Permite escuchar y manejar eventos de teclado.

Características

Soporta verificación de teclas, usando bajo el capó la propiedad event.key y si necesitas usar otras propiedades como event.code puede cambiarlo en la configuración mediante la opción checker.
La propagación se detiene de forma predeterminada si hay un controlador de eventos, de modo que un componente principal no responda a un evento que ya manejó un elemento secundario.

Instalación

Instale el custom hook desde su terminal.

npm i @raddix/use-keyboard

Uso

Ejemplo Básico

En este ejemplo, al presionar una tecla dentro del campo de texto se establece un color de fondo rojo y al soltar la tecla se establece un color de fondo azul.

import { useKeyboard } from '@raddix/use-keyboard';
import { useState } from 'react';

export const Example = () => {
  const [bgColor, setBgColor] = useState('');

  const onkeyDown = useKeyboard(() => {
    setBgColor('red');
  });

  const onkeyUp = useKeyboard(() => {
    setBgColor('blue');
  });

  return (
    <div>
      <input
        type='text'
        onKeyDown={onkeyDown}
        onKeyUp={onkeyUp}
        style={{ background: bgColor }}
      />
    </div>
  );
};

Verificación de teclas

Este ejemplo muestra un elemento de entrada que no permite caracteres semigráficos. Se agrega los caracteres semigráficos al Array del useKeyboard para que haga la verificación de teclas cuando se ejecute el evento onKeyDown.

import { useState } from 'react';
import { useKeyboard } from '@raddix/use-keyboard';

export const Example = () => {
  const [error, setError] = useState(false);

  const onkeyDown = useKeyboard(() => {
    setError(true);
  }, ['á', 'é', 'í', 'ó', 'ú', 'ñ']);

  return (
    <div>
      <label htmlFor='Username'>Username</label>
      <input type='text' id='Username' onKeyDown={onkeyDown} />

      <p>
        {error
          ? 'Im sorry, but semigraphic characters are not supported'
          : 'You can use letters, numbers and punctuation marks'}
      </p>
    </div>
  );
};

Eventos de teclado globales

En este ejemplo, lanzaremos una alerta cuando la tecla a es precionada. Para que el hook useKeyboard detecte eventos globales necesitamos activar la opción globalEvent: true

import { useKeyboard } from '@raddix/use-keyboard';

export const Example = () => {
  useKeyboard(() => alert('Success'), ['c'], { globalEvent: true });

  return (
    <div>
      Press <code>c</code>
    </div>
  );
};

API

Parámetros

Nombre	Descripción	Requerido	Type
handler	Función que se llama una vez pulsadas las teclas.	Yes	(e:KeyboardEvent)=>void
shortcut	Lista de teclas para la verificación	No	Array<string \| number>
options	Opciones de configuración	No	Object

Opciones de Configuración

Nombre	Descripción	Requerido	Valor por defecto	Type
globalEvent	Habilita eventos globales desde el documento	No	false	boolean
stopPropagation	Detiene la propagación del evento	No	true	boolean
preventDefault	Bloquea el comportamiento predeterminado del evento	No	false	boolean
checker	Propiedad del objeto KeyboardEvent para identificar una tecla	No	key	"key" \| "code"