Utilizando atajos de teclado en react

Utilizando atajos de teclado en react

Hola amigos de la #nerdytud

En el día de hoy les comparto un ejemplo bastante práctico para la captura de teclas (o combinación de las mismas) realizado en react.

Inicializar aplicacion

npm init vite@latest hotkey -- --template react

Instalar dependencias

cd hotkey

npm i

npm i hotkeys-js

Modificar app.js

import hotkeys from "hotkeys-js";

function App() {

  // una sola tecla
  hotkeys('r', (event, handler) => {
    event.preventDefault();
    console.info('ha presionado r');
  });

  // combinación de teclas
  hotkeys('ctrl+h', (event, handler) => {
    event.preventDefault();
    console.info('ha presionado ctrl + h');
  });

  return (
    <div className="App">
      presione cualquier tecla
    </div>
  )
}

export default App;

Ejecutar aplicación

npm run dev

http://localhost:3000