{"id":16125559,"url":"https://github.com/semibran/key-state","last_synced_at":"2025-03-18T13:30:47.313Z","repository":{"id":53506662,"uuid":"80272506","full_name":"semibran/key-state","owner":"semibran","description":":key: simple DOM keyboard state tracker","archived":false,"fork":false,"pushed_at":"2021-03-27T10:41:08.000Z","size":25,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T09:43:05.982Z","etag":null,"topics":["event","html","input","keyboard","listener"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/key-state","language":"JavaScript","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/semibran.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-28T07:35:26.000Z","updated_at":"2022-08-08T12:11:32.000Z","dependencies_parsed_at":"2022-09-20T02:03:40.000Z","dependency_job_id":null,"html_url":"https://github.com/semibran/key-state","commit_stats":null,"previous_names":["semibran/keys"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fkey-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fkey-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fkey-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/semibran%2Fkey-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/semibran","download_url":"https://codeload.github.com/semibran/key-state/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243928156,"owners_count":20370243,"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":["event","html","input","keyboard","listener"],"created_at":"2024-10-09T21:30:00.215Z","updated_at":"2025-03-18T13:30:47.023Z","avatar_url":"https://github.com/semibran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# key-state\n\u003e simple DOM keyboard state tracker\n\n```js\nfunction loop() {\n  if (keys.left) {\n    move(hero, \"left\")\n  }\n  if (keys.right) {\n    move(hero, \"right\")\n  }\n  requestAnimationFrame(loop)\n}\n```\n\nThis package is a thin wrapper over `KeyboardEvent` which provides a flexible and intuitive interface for tracking DOM keyboard state.\n## install\n[![npm badge]][npm package]\n\nTo use this module in your project, package your code together using a bundler like [`rollup`][rollup] together with [`rollup-plugin-node-resolve`][rollup-plugin-node-resolve].\n\n## usage\n\n### `listen(element, keymap?)`\nTo begin listening for key events, call the function exported by this module (`listen`) while passing in the `element` that you'd like to scope down key events to (usually `window`), like so:\n\n```js\nimport listen from \"key-state\"\n\nconst keys = listen(window)\n```\n\n`listen` returns the keyboard state (`keys`, for **key**board **s**tate) in the form of an object which maps browser-defined key names as provided by `event.code` to the amount of frames the key in question has been held down. For example, after holding down the spacebar for half a second, `keys.Space` would yield `30` at 60 frames per second.\n\nThe `keys` map is populated and updated automatically as key events are received. If a key hasn't been pressed since the map was created, it will evaluate to `undefined`. This feature implies that any key that isn't being pressed will be mapped to either `0` or `undefined`, meaning you can check if a key _is_ being pressed by determining if its value is truthy.\n\n```js\nif (keys.Enter) {\n  // The enter key is being pressed. Wow\n}\n```\n\nIf you'd prefer to use your own custom key names for flexibility, pass a `keymap` into `listen` with the following `name -\u003e [ keys ]` structure:\n\n```js\nconst keys = listen(window, {\n  left: [ \"ArrowLeft\", \"KeyA\" ],\n  right: [ \"ArrowRight\", \"KeyD\" ]\n})\n```\n\nThen, just access the key times using the names you specified. Feeding multiple keys into the keymap's corresponding key list will prompt the listener to lump all of those keys under a single name.\n\n```js\nfunction loop() {\n  if (keys.left) {\n    move(hero, \"left\")\n  }\n  if (keys.right) {\n    move(hero, \"right\")\n  }\n  requestAnimationFrame(loop)\n}\n```\n\n## license\nMIT © [Brandon Semilla][github profile]\n\n[npm badge]: https://nodei.co/npm/key-state.png?mini\n[npm package]: https://www.npmjs.com/package/key-state\n[rollup]: https://github.com/rollup/rollup\n[rollup-plugin-node-resolve]: https://github.com/rollup/rollup-plugin-node-resolve\n[github profile]: https://github.com/semibran\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fkey-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsemibran%2Fkey-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsemibran%2Fkey-state/lists"}