Skip to content

Commit

Permalink
v1.0.4
Browse files Browse the repository at this point in the history
  • Loading branch information
CarcajadaArtificial committed Oct 21, 2024
1 parent ffde09d commit cbf6906
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 5 deletions.
12 changes: 8 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
# Changelog

# v1.0.3
## v1.0.4

- Added a Readme file.

## v1.0.3

- Added a fix to an explict return error.

# v1.0.2
## v1.0.2

- Added the `Event` interface to prevent having dependencies.

# v1.0.1
## v1.0.1

- Renamed `main.ts` to `mod.ts`

# v1.0.0
## v1.0.0

- Migrated the functionality from the Lunchbox project.
- Added boilerplate Deno configuration.
Expand Down
70 changes: 70 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# ⌨️ Teclas

[![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.

### 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 <div tabIndex={0} onKeyUp={handleKeyUp}>Press keys inside this box</div>;
}
```

#### 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.

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.0",
"version": "1.0.4",
"exports": "./mod.ts",
"tasks": {
"dev": "deno run --watch main.ts"
Expand Down

0 comments on commit cbf6906

Please sign in to comment.