Source: navigation/Hotkey.js

import { useEffect } from "react";
import { readHotkeyProp, useHotkeys, uuid } from "../../_core";

/**
 * Componente que renderiza html link que al ser clickeado ejecuta una acción definida en las propiedades del mismo
 * @name Reactor.Components.Navigation.Hotkey
 * @param {string} hotkeys tecla o combinacion que ejecutara el callback que se envia a este componente, se pueden usar varias entradas separando por espacio, las combinaciones se pueden hacer con las teclas ctrl, shift, alt y meta, por ej: hotkeys="ctrl+shift+k" (registra evento control + shift + K) hostkeys="ctrl+d ctrl+h" (registra eventos control + D o control + H)
 * @param {function} callback funcion que se va a ejecutar 
 * @class
 * @example
<hotkey hotkeys="ctrl+s ctrl+g f1" callback={handleHotkey}></hotkey>
 */

export const Hotkey = ({hotkeys, children, callback}) => {

  const { register, unregister } = useHotkeys();

  useEffect(()=>{
    if(hotkeys){
      const eventos = readHotkeyProp(hotkeys);
      const guid = uuid();
      register({callback, events: eventos, guid});
      return () => {
        unregister(guid);
      }
    }
  }, [hotkeys, callback]);

  return <>{children}</>

}