{"id":13834138,"url":"https://github.com/haldarmahesh/use-key-hook","last_synced_at":"2025-04-10T13:22:53.179Z","repository":{"id":46865750,"uuid":"155380735","full_name":"haldarmahesh/use-key-hook","owner":"haldarmahesh","description":"React hook to handle all the key press.","archived":false,"fork":false,"pushed_at":"2023-01-07T07:05:29.000Z","size":1027,"stargazers_count":28,"open_issues_count":13,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-24T12:08:51.952Z","etag":null,"topics":["hooks","javascript","react","react-hook","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":null,"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/haldarmahesh.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":"2018-10-30T12:22:13.000Z","updated_at":"2025-03-12T00:23:49.000Z","dependencies_parsed_at":"2023-02-06T14:30:55.174Z","dependency_job_id":null,"html_url":"https://github.com/haldarmahesh/use-key-hook","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haldarmahesh%2Fuse-key-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haldarmahesh%2Fuse-key-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haldarmahesh%2Fuse-key-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haldarmahesh%2Fuse-key-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haldarmahesh","download_url":"https://codeload.github.com/haldarmahesh/use-key-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225664,"owners_count":21068078,"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":["hooks","javascript","react","react-hook","react-hooks","reactjs"],"created_at":"2024-08-04T13:00:55.578Z","updated_at":"2025-04-10T13:22:53.145Z","avatar_url":"https://github.com/haldarmahesh.png","language":"JavaScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/haldarmahesh/use-key-hook.svg?branch=master)](https://travis-ci.org/haldarmahesh/use-key-hook)\n[![npm version](https://badge.fury.io/js/use-key-hook.svg)](https://badge.fury.io/js/use-key-hook)\n\n# use-key-hook\n\nThis is a React hook that detects all or some keys from keyboard.\n\nIf you want to detect few keys and execute function, you can provide a list of ASCII codes or keys in an array.\n\nFew examples of use cases:\n\n- Add keyboard shortcuts in your app\n- Close modal on press of escape key\n- If it is react music player, control volume and seek video\n- Implement next or back on slide show\n\n## Installing\n\n```bash\nnpm install use-key-hook\n```\n\n```bash\nyarn add use-key-hook\n```\n\n## Demo\n\n[Demo](http://www.maheshhaldar.com/demo-use-key/)\n\n## Usage\n\nThe following definition will only detect and execute provided callback **only** when `A`, `+` or `z` is pressed from keyboard.\n\n```javascript\nimport useKey from 'use-key-hook';\n\nfunction MyComponent  = (props) =\u003e {\n  useKey((pressedKey, event) =\u003e {\n    console.log('Detected Key press', pressedKey);\n    console.log('Get event, if you want more details and preventDefault', event)\n  }, {\n    detectKeys: ['A', '+', 122]\n  });\n};\n```\n\n## Arguments in useKey\n\n### 1) callback _(required)_\n\n\u003e type: function\n\u003e\n\u003e The first argument is callback function which gets executed whenever the keys are pressed.\n\n### 2) detectKeys _(optional)_\n\n\u003e type: array\n\u003e array item type: string | number\n\u003e\n\u003e The second argument is an object and should contain one key in name of **detectKeys**.\n\u003e This has to be an array.\n\n**When array is empty or not passed** All the keys will be detected and callback will be executed.\n\nThe items in arrays can be **ASCII code** of keys or **characters itself**.\n\n#### Example values of detectKeys array\n\n```js\n{\n  detectKeys: ['A', 69, 27];\n}\n```\n\nThe above will detect and execute callback only the following keys\n\n- \u003ckbd\u003eA\u003c/kbd\u003e maps with item 0 `A`\n- \u003ckbd\u003eEnter\u003c/kbd\u003e key maps with ASCII code is 69\n- \u003ckbd\u003eEscape\u003c/kbd\u003e key maps with numeric ASCII code 27.\n\nPressing any other key will not be detected.\n\n```js\n{\n  detectKeys: [1, '2'];\n}\n```\n\nThe above will detect when number \u003ckbd\u003e2\u003c/kbd\u003e is pressed only.\nPressing \u003ckbd\u003e1\u003c/kbd\u003e, it will not be detected as we passed ASCII code numeric `1` and this is not number `1`.\n\nPressing any other key will not be detected.\n\n### 3) keyevent _(optional)_\n\n\u003e type: string\n\u003e\n\u003e default: `keydown`\n\u003e\n\u003e Defines the type of event this hook should capture.\n\nThis parameter is passed in the config object along with `detectKeys`.\n\nThere are 3 type of events options [`keydown`, `keyup`, `keypress`].\n\nExample config object:\n\n```js\n{\n  detectKeys: [1, '2'],\n  keyevent: 'keyup'\n}\n```\n\n## Contributing\n\nIf you have any new suggestions, new features, bug fixes, etc. please contribute by raising pull request on the [repository](https://github.com/haldarmahesh/use-key-hook).\n\nIf you have any issue with the `use-key-hook`, open an issue on [Github](https://github.com/haldarmahesh/use-key-hook).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaldarmahesh%2Fuse-key-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaldarmahesh%2Fuse-key-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaldarmahesh%2Fuse-key-hook/lists"}