Skip to content

Instantly share code, notes, and snippets.

@christiangenco

christiangenco/Example.js

Created February 27, 2021 17:31
Show Gist options
  • Save christiangenco/5f80c91f56f3945dd9c288d4bf6a2e98 to your computer and use it in GitHub Desktop.
Save christiangenco/5f80c91f56f3945dd9c288d4bf6a2e98 to your computer and use it in GitHub Desktop.
Download ZIP
React hook for mousetrap
Raw
Example.js
import React from "react";
import useMousetrap from "./hooks/useMousetrap";
export default function Example(){
useMousetrap({
a: () => console.log("you pressed a"),
"ctrl+space": () => console.log("you pressed ctrl+space");
});
return "lol hi";
}
Raw
useMousetrap.js
import { useEffect } from "react";
import Mousetrap from "mousetrap";
export default function useMousetrap(keybindings) {
useEffect(() => {
Object.entries(keybindings).forEach(([key, fn]) =>
Mousetrap.bind(`${key}`, e => {
e.preventDefault();
return fn(e);
})
);
return () => Object.keys(keybindings).forEach(key => Mousetrap.unbind(key));
}, [keybindings]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment