Toukey is a simple and efficient keyboard events library. That's toukey's doc site.
npm i toukey --saveor
pnpm add toukey --saveYou could download and link toukey.js in your HTML, It can also be downloaded via UNPKG | jsDelivr
<script src="https://unpkg.com/toukey/dist/toukey.umd.min.js"></script>
<script>
toukey.subscribe('space', function() {
console.log('space');
});
</script>It is easy to use with react.
import { useEffect } from "react";
import { subscribe } from "toukey";
function App() {
useEffect(() => {
return subscribe("scope", () => {
console.log("scope");
});
});
return <div>hello world</div>;
}And here is a library named react-toukey-hook which build with toukey for react hook.
You will need Node.js installed on your system.
import { subscribe } from "toukey";
subscribe("scope", () => {
console.log("scope");
});The subscribe interface returns a function that can be called to cancel the current event listener.
import { subscribe } from "toukey";
const unsubscribe = subscribe("scope", () => {
console.log("scope");
});
unsubscribe();Multiple event listeners can be created at once when using toukey.
import { subscribe } from "toukey";
subscribe("scope, a", () => {
console.log("scope or a");
});Through '+', you can monitor the key combination, and you can also customize the key combination separator.
import { subscribe } from "toukey";
subscribe("ctrl+a", () => {
console.log("ctrl+a");
});When calling, the third parameter can specify the scope of the event. "default" is the default scope.
import { subscribe, setScope } from "toukey";
const defaultHandler = () => {
console.log("scope in default");
};
const subHandler = () => {
console.log("scope in sub");
};
subscribe("scope", defaultHandler, "default");
subscribe("scope", subHandler, { scope: "sub" });The current effective scope can be set through the setScope interface.
import { setScope } from "toukey";
setScope("sub");The current effective scope can be obtained through the getScope interface.
import { getScope } from "toukey";
console.log(getScope());The specified scope can be deleted through the deleteScope interface.
import { deleteScope } from "toukey";
deleteScope("main");If scope is specified as "*", the listener function will ignore the scope setting.
import { subscribe, setScope } from "toukey";
const handler = () => {
console.log("scope in default");
};
const subHandler = () => {
console.log("scope in sub");
};
subscribe("scope", defaultHandler, "*");
subscribe("scope", subHandler, "sub");
setScope("sub");You can set the type for handler call.
import { subscribe, setScope } from 'toukey';
const downHandler = () => {
console.log('scope keydown');
};
const upHandler = () => {
console.log('scope keyup');
};
subscribe('scope', downHandler, {'keydown'});
subscribe('scope', upHandler, {'keyup'});You could clear all listeners by the clearAll()
import { clearAll } from "toukey";
clearAll();You could enable all listeners if the toukey is not enabled.
import { enable } from "toukey";
enable();You could disable all listeners.
import { enable } from "toukey";
enable();All listeners will be invalid if the isEnabled returns false.
import { enable } from "toukey";
console.log(isEnabled());