{"id":18459088,"url":"https://github.com/carcajadaartificial/teclas","last_synced_at":"2025-04-08T05:34:54.817Z","repository":{"id":258900375,"uuid":"875857073","full_name":"CarcajadaArtificial/teclas","owner":"CarcajadaArtificial","description":"Teclas ⌨️ is a zero-dependency lightweight typescript library where you can easily handle keyboard events.","archived":false,"fork":false,"pushed_at":"2024-10-22T05:19:29.000Z","size":18,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T07:11:50.499Z","etag":null,"topics":["bun","deno","javascript","javascript-library","jsr","keyboard","keyboard-events","nodejs","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://jsr.io/@carcajada/teclas","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CarcajadaArtificial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-21T01:29:28.000Z","updated_at":"2025-03-04T12:57:46.000Z","dependencies_parsed_at":"2024-10-22T05:33:52.278Z","dependency_job_id":null,"html_url":"https://github.com/CarcajadaArtificial/teclas","commit_stats":null,"previous_names":["carcajadaartificial/teclas"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Fteclas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Fteclas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Fteclas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Fteclas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CarcajadaArtificial","download_url":"https://codeload.github.com/CarcajadaArtificial/teclas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785919,"owners_count":20995641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","deno","javascript","javascript-library","jsr","keyboard","keyboard-events","nodejs","typescript","typescript-library"],"created_at":"2024-11-06T08:21:45.505Z","updated_at":"2025-04-08T05:34:49.799Z","avatar_url":"https://github.com/CarcajadaArtificial.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ⌨️ Teclas\n\n[![JSR](https://jsr.io/badges/@carcajada/teclas)](https://jsr.io/@carcajada/teclas)\n[![JSR](https://jsr.io/badges/@carcajada/teclas/score)](https://jsr.io/@carcajada/teclas)\n\n`` Hello ( ´ ω ` )ノﾞ `` Welcome to ⌨️ Teclas, here you can \u003cins\u003eeasily\u003c/ins\u003e\nand \u003cins\u003eprecisely\u003c/ins\u003e **handle keystrokes** on event listeners.\n\n### Ideas behind this library\n\nHandling keyboard events is a fairly common software requirement. When listening\nto keystrokes, one could handle them directly inline in the jsx code, this is\nunadvisable because HTML-like code is one of the least readables in my opinion.\nA better way would be to abstract the common keystroke event handlers and import\nthem anywhere they're used. After this implementation one might want to add or\nchange the existing keystrokes for extendibility and maintainability, this\nmodule is the result of exactly that.\n\n### Usage\n\nLet's say we want to handle complex keyboard interactions for this component:\n\n```tsx\nfunction example() {\n  return (\n    \u003cdiv tabIndex={0} onKeyUp={handleKeyUp}\u003e\n      Press keys inside this box\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Before\n\n```tsx\nfunction handleKeyUp(event) {\n  const isMac = /Mac/.test(navigator.userAgent);\n\n  if (event.key === \"Enter\") {\n    console.log(\"Enter key pressed\");\n  } else if ((event.ctrlKey || event.metaKey) \u0026\u0026 event.key === \"Enter\") {\n    console.log(\"Control + Enter or Meta + Enter pressed\");\n  } else if (\n    (event.ctrlKey || event.metaKey) \u0026\u0026\n    event.shiftKey \u0026\u0026\n    event.key === \"Enter\"\n  ) {\n    console.log(\"Control + Shift + Enter or Meta + Shift + Enter pressed\");\n  }\n}\n```\n\n#### After\n\n```tsx\nconst handleKeyUp = handleKeyboard([\n  {\n    keys: [Key.Enter],\n    cb: console.log(\"Enter key pressed\"),\n  },\n  {\n    keys: [Key.mod1],\n    cb: console.log(\"Control + Enter or Meta + Enter pressed\"),\n  },\n  {\n    keys: [Key.mod1, Key.Shift, Key.Enter],\n    cb: console.log(\"Control + Shift + Enter or Meta + Shift + Enter pressed\"),\n  },\n]);\n```\n\n### Features\n\n- Detects individual key presses (e.g., Enter, Escape, Shift, etc.).\n- Handles different behavior for modifier keys on Windows and macOS.\n- Supports complex keystroke combinations with optional exclusion of other keys.\n- Provides utility functions to improve keyboard event handling and enhance user\n  experience.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarcajadaartificial%2Fteclas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarcajadaartificial%2Fteclas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarcajadaartificial%2Fteclas/lists"}