https://github.com/carcajadaartificial/teclas
Teclas ⌨️ is a zero-dependency lightweight typescript library where you can easily handle keyboard events.
https://github.com/carcajadaartificial/teclas
bun deno javascript javascript-library jsr keyboard keyboard-events nodejs typescript typescript-library
Last synced: about 1 year ago
JSON representation
Teclas ⌨️ is a zero-dependency lightweight typescript library where you can easily handle keyboard events.
- Host: GitHub
- URL: https://github.com/carcajadaartificial/teclas
- Owner: CarcajadaArtificial
- License: mit
- Created: 2024-10-21T01:29:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T05:19:29.000Z (over 1 year ago)
- Last Synced: 2025-03-23T07:11:50.499Z (about 1 year ago)
- Topics: bun, deno, javascript, javascript-library, jsr, keyboard, keyboard-events, nodejs, typescript, typescript-library
- Language: TypeScript
- Homepage: https://jsr.io/@carcajada/teclas
- Size: 17.6 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ⌨️ Teclas
[](https://jsr.io/@carcajada/teclas)
[](https://jsr.io/@carcajada/teclas)
`` Hello ( ´ ω ` )ノﾞ `` Welcome to ⌨️ Teclas, here you can easily
and precisely **handle keystrokes** on event listeners.
### Ideas behind this library
Handling keyboard events is a fairly common software requirement. When listening
to keystrokes, one could handle them directly inline in the jsx code, this is
unadvisable because HTML-like code is one of the least readables in my opinion.
A better way would be to abstract the common keystroke event handlers and import
them anywhere they're used. After this implementation one might want to add or
change the existing keystrokes for extendibility and maintainability, this
module is the result of exactly that.
### Usage
Let's say we want to handle complex keyboard interactions for this component:
```tsx
function example() {
return (
Press keys inside this box
);
}
```
#### Before
```tsx
function handleKeyUp(event) {
const isMac = /Mac/.test(navigator.userAgent);
if (event.key === "Enter") {
console.log("Enter key pressed");
} else if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
console.log("Control + Enter or Meta + Enter pressed");
} else if (
(event.ctrlKey || event.metaKey) &&
event.shiftKey &&
event.key === "Enter"
) {
console.log("Control + Shift + Enter or Meta + Shift + Enter pressed");
}
}
```
#### After
```tsx
const handleKeyUp = handleKeyboard([
{
keys: [Key.Enter],
cb: console.log("Enter key pressed"),
},
{
keys: [Key.mod1],
cb: console.log("Control + Enter or Meta + Enter pressed"),
},
{
keys: [Key.mod1, Key.Shift, Key.Enter],
cb: console.log("Control + Shift + Enter or Meta + Shift + Enter pressed"),
},
]);
```
### Features
- Detects individual key presses (e.g., Enter, Escape, Shift, etc.).
- Handles different behavior for modifier keys on Windows and macOS.
- Supports complex keystroke combinations with optional exclusion of other keys.
- Provides utility functions to improve keyboard event handling and enhance user
experience.