{"id":16791984,"url":"https://github.com/metonym/svelte-keydown","last_synced_at":"2025-03-17T03:30:40.602Z","repository":{"id":42674159,"uuid":"259055982","full_name":"metonym/svelte-keydown","owner":"metonym","description":"Utility to listen for keyboard events","archived":false,"fork":false,"pushed_at":"2024-03-15T02:20:23.000Z","size":225,"stargazers_count":41,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-16T03:03:08.526Z","etag":null,"topics":["enter","escape","keydown","keyup","modal","svelte","svelte-component","utility"],"latest_commit_sha":null,"homepage":"https://metonym.github.io/svelte-keydown/","language":"Svelte","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/metonym.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":"2020-04-26T14:50:39.000Z","updated_at":"2024-06-17T16:55:09.227Z","dependencies_parsed_at":"2024-03-15T03:01:51.908Z","dependency_job_id":"f8bfbafd-dcc0-4542-8de6-63ee4677300c","html_url":"https://github.com/metonym/svelte-keydown","commit_stats":{"total_commits":41,"total_committers":3,"mean_commits":"13.666666666666666","dds":"0.12195121951219512","last_synced_commit":"5b6ae8fc254e494b15fff9ce1083b1fe91818980"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-keydown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-keydown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-keydown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelte-keydown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelte-keydown/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841204,"owners_count":20356441,"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":["enter","escape","keydown","keyup","modal","svelte","svelte-component","utility"],"created_at":"2024-10-13T08:43:44.325Z","updated_at":"2025-03-17T03:30:40.326Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-keydown\n\n[![NPM][npm]][npm-url]\n\n\u003e Utility to listen for keyboard events.\n\n\u003c!-- REPO_URL --\u003e\n\nUtility component leveraging the [svelte:body API](https://svelte.dev/docs#svelte_body) to listen for [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event) events.\n\n[Try it in the Svelte REPL](https://svelte.dev/repl/f22827a1e3c94a018a685fec6346db6c).\n\n**Use Cases**\n\n- toggle modals\n- capture a combination of keys (i.e., \"Meta-s\")\n\n---\n\n\u003c!-- TOC --\u003e\n\n## Installation\n\n**Yarn**\n\n```bash\nyarn add -D svelte-keydown\n```\n\n**NPM**\n\n```bash\nnpm i -D svelte-keydown\n```\n\n**pnpm**\n\n```bash\npnpm i -D svelte-keydown\n```\n\n## Usage\n\n### Basic\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let events = [];\n\u003c/script\u003e\n\n\u003cKeydown\n  on:Enter={() =\u003e {\n    events = [...events, \"enter\"];\n  }}\n/\u003e\n\nPress \"enter\": {events.join(\", \")}\n```\n\n### Pause on input\n\nSet `pauseOnInput` to prevent the utility from capturing keydown events on input events.\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let evt = [];\n\u003c/script\u003e\n\n\u003cKeydown\n  pauseOnInput\n  on:key={(e) =\u003e {\n    evt = [...evt, e.detail];\n  }}\n/\u003e\n\n\u003cinput placeholder=\"Type here...\" /\u003e\n\n{evt.join(\"\")}\n```\n\n### Preventing the default behavior\n\nThis component forward the `on:keyup` and `on:keydown` events.\n\nYou can use `on:keydown` to prevent the default behavior for certain keys.\n\nIn the following example, pressing \"Space\" should not cause the browser page to scroll.\n\n```svelte\n\u003cKeydown\n  on:keydown={(e) =\u003e {\n    if (e.key === \" \") e.preventDefault();\n  }}\n  on:Space={(e) =\u003e {\n    console.log(\"key\", \"Space\");\n  }}\n/\u003e\n```\n\n## Examples\n\n### Escape to close a modal\n\nIn this use case, keydown events are paused if the modal is not open.\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let showModal = true;\n\u003c/script\u003e\n\n\u003cKeydown paused={!showModal} on:Escape={() =\u003e (showModal = false)} /\u003e\n\n\u003cbutton on:click={() =\u003e (showModal = !showModal)}\u003eToggled? {showModal}\u003c/button\u003e\n```\n\n### `on:combo`\n\nUse the `combo` dispatched event to listen for a combination of keys.\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let combo = [];\n\u003c/script\u003e\n\n\u003cKeydown on:combo={(e) =\u003e (combo = [...combo, e.detail])} /\u003e\n\n{combo.join(\", \")}\n```\n\n#### `separator`\n\nUse the `separator` property to customize the separating key between multiple keys.\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let combo = [];\n\u003c/script\u003e\n\n\u003cKeydown separator=\"+\" on:combo={(e) =\u003e (combo = [...combo, e.detail])} /\u003e\n\n{combo.join(\", \")}\n```\n\n## API\n\n| Prop         | Type      | Default value |\n| :----------- | :-------- | :------------ |\n| paused       | `boolean` | `false`       |\n| pauseOnInput | `boolean` | `false`       |\n| separator    | `string`  | `-`           |\n\n### Forwarded events\n\n- `on:keyup`\n- `on:keydown`\n\n### Dispatched events\n\n#### `on:[Key]`\n\nExample:\n\n```svelte no-eval\n\u003cKeydown on:Enter /\u003e\n\u003cKeydown on:Escape /\u003e\n\u003cKeydown on:Space /\u003e\n```\n\n#### `on:key`\n\nAlternative API to `on:[Key]`.\n\nExample:\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let keys = [];\n\u003c/script\u003e\n\n\u003cKeydown on:key={({ detail }) =\u003e (keys = [...keys, detail])} /\u003e\n\n\u003cpre\u003e{JSON.stringify(keys, null, 2)}\u003c/pre\u003e\n```\n\n#### `on:combo`\n\nTriggered when a sequence of keys are pressed and cleared when a keyup event is fired.\n\nExamples:\n\n- \"Shift-S\"\n- \"Meta-c\" (Copy)\n- \"Meta-v\" (Paste)\n\n```svelte\n\u003cscript\u003e\n  import Keydown from \"svelte-keydown\";\n\n  let combos = [];\n\u003c/script\u003e\n\n\u003cKeydown on:combo={({ detail }) =\u003e (combos = [...combos, detail])} /\u003e\n\n\u003cpre\u003e{JSON.stringify(combos, null, 2)}\u003c/pre\u003e\n```\n\n## TypeScript\n\nSvelte version 3.31 or greater is required to use this component with TypeScript.\n\nTypeScript definitions are located in the [types folder](./types).\n\n## Changelog\n\n[CHANGELOG.md](CHANGELOG.md)\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/svelte-keydown.svg?color=%23ff3e00\u0026style=for-the-badge\n[npm-url]: https://npmjs.com/package/svelte-keydown\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-keydown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelte-keydown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelte-keydown/lists"}