Skip to content

Commit

Permalink
v0.1.5
Browse files Browse the repository at this point in the history
  • Loading branch information
CarcajadaArtificial committed Oct 22, 2024
1 parent cbf6906 commit d8c8b8f
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 98 deletions.
19 changes: 18 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
# Changelog

## Roadmap

- Implement an `else` scenario for the `handleKeyboard()` function.
- Include unit testing for the module's functions. Compromises with mockups of
certain functionalities must be done.
- Key secuence detection (e.g. Cmd+K then Cmd+C).
- Asynchronous callback support.
- Custom key aliases to the Key object.
- Event throttling/debouncing.
- Key hold detection.

## v1.0.5

- Added the type `CheckKeypress` to represent the function.
- Updated the module's documentation.
- Updated the project's README.

## v1.0.4

- Added a Readme file.
Expand All @@ -21,4 +38,4 @@
- Migrated the functionality from the Lunchbox project.
- Added boilerplate Deno configuration.
- Added a `.gitignore`.
- Added a GitHub action for publishing to jsr.
- Added a GitHub action for publishing to jsr.
46 changes: 27 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,49 @@
[![JSR](https://jsr.io/badges/@carcajada/teclas)](https://jsr.io/@carcajada/teclas)
[![JSR](https://jsr.io/badges/@carcajada/teclas/score)](https://jsr.io/@carcajada/teclas)

`` Hello ( ´ ω ` )ノ゙ `` Welcome to ⌨️ Teclas, here you can <ins>easily</ins> and <ins>precisely</ins> **handle keystrokes** on event listeners.
`` Hello ( ´ ω ` )ノ゙ `` Welcome to ⌨️ Teclas, here you can <ins>easily</ins>
and <ins>precisely</ins> **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.
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 <div tabIndex={0} onKeyUp={handleKeyUp}>Press keys inside this box</div>;
return (
<div tabIndex={0} onKeyUp={handleKeyUp}>
Press keys inside this box
</div>
);
}
```

#### Before
#### 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');
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'
event.key === "Enter"
) {
console.log('Control + Shift + Enter or Meta + Shift + Enter pressed');
console.log("Control + Shift + Enter or Meta + Shift + Enter pressed");
}
}
```
Expand All @@ -48,23 +56,23 @@ function handleKeyUp(event) {
const handleKeyUp = handleKeyboard([
{
keys: [Key.Enter],
cb: console.log('Enter key pressed')
cb: console.log("Enter key pressed"),
},
{
keys: [Key.mod1],
cb: console.log('Control + Enter or Meta + Enter pressed'),
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'),
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.

- Provides utility functions to improve keyboard event handling and enhance user
experience.
2 changes: 1 addition & 1 deletion deno.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@carcajada/teclas",
"version": "1.0.4",
"version": "1.0.5",
"exports": "./mod.ts",
"tasks": {
"dev": "deno run --watch main.ts"
Expand Down
Loading

0 comments on commit d8c8b8f

Please sign in to comment.