useKey
This is an example to check which key was pressed.
The state of isKeydown
changes to true when a key is pressed in the input, and false when keyup is performed.
When multiple keys are pressed, the state of keys
changes.
* isKeydown: false
* selected keys:
* selected keys:
Reactive Adapter
const REACTIVE_ADAPTER = ({ onInit, onDestroy, getProps }) => {
const obj = reactive({
keys: [],
isKeydown: false,
});
const ref = getProps().ref;
const onKeydown = e => {
const keys = obj.keys;
const key = e.key;
if (keys.includes(key)) {
return;
}
obj.keys = [...keys, e.key].sort((a, b) => a < b ? -1 : 1);
obj.isKeydown = true;
};
const onKeyup = e => {
const keys = obj.keys;
const key = e.key;
const index = keys.indexOf(key);
if (index === -1) {
return;
}
keys.splice(index, 1);
obj.keys = [...keys];
obj.isKeydown = !!keys.length;
};
const onBlur = () => {
if (!obj.keys.length) {
return;
}
obj.keys = [];
obj.isKeydown = false;
}
onInit(() => {
const element = ref.value || ref.current;
element?.addEventListener("keydown", onKeydown);
element?.addEventListener("keyup", onKeyup);
element?.addEventListener("keyup", onBlur);
});
onDestroy(() => {
const element = ref.value || ref.current;
element?.removeEventListener("keydown", onKeydown);
element?.removeEventListener("keyup", onKeyup);
element?.removeEventListener("keyup", onBlur);
});
return obj;
};
Frameworks
- React
- Vue@2
- Vue@3
- Svelte
You can create a Reactive Component by importing the @cfcs/react
module and using the useReactive
function.
import React from "react";
import { useReactive } from "@cfcs/react";
function useScroll() {
const ref = React.useRef(null);
return Object.assign(useReactive(ADAPTER, () => ({ ref })), {
ref,
});
}
export function App() {
const { isKeydown, keys, ref } = useScroll();
return <div>
* isKeydown: {isKeydown ? "true" : "false"} <br />
* selected keys: {keys.join(" + ")} <br />
<input ref={ref} />
</div>;
}