Tengo un componente que usa ganchos de reacción para registrar teclas rápidas: useMousetrap .

Eso es un envoltorio de ganchos para la biblioteca de trampas para ratones.

Aquí está el componente:

 const MyComponent = ({ name }) => { const sayHi = () => { alert(`Hello from Component ${name}`); }; useMousetrap('x', sayHi); return ( <div> Component {name} </div> ); };

Cuando implemento ese componente dentro de algún otro componente o página, todo funciona bien. Pero ahora digamos que quiero tener dos componentes en la misma página:

 <div> <MyComponent name="A" /> <MyComponent name="B" /> </div>

Ahora ambos componentes intentan registrar la tecla de acceso rápido. Parece que siempre es el que aparece más tarde en el flujo del documento, el que tiene éxito. Entonces, si presiono x en el ejemplo anterior, la alerta diría Hello from Component B .

¿Hay alguna manera de asegurarse de que solo un componente esté active ? Estaba pensando en registrar y cancelar el registro de esas teclas de acceso rápido según el componente que esté a la vista, pero useMousetrap , que es un gancho, parece dificultar bastante la lógica condicional. Estoy un poco confundido aquí.

¿Existe una forma rápida y sencilla de activar o desactivar las teclas de acceso directo de forma condicional?