{"id":18296346,"url":"https://github.com/ruanyl/react-keyboard","last_synced_at":"2025-04-05T12:31:57.076Z","repository":{"id":16230619,"uuid":"79551401","full_name":"ruanyl/react-keyboard","owner":"ruanyl","description":"Handle keyboard event in React","archived":false,"fork":false,"pushed_at":"2022-12-07T14:57:17.000Z","size":1198,"stargazers_count":16,"open_issues_count":17,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-14T15:30:36.655Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bigruan.gitbook.io/react-keyboard/","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/ruanyl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-20T10:53:41.000Z","updated_at":"2024-01-07T12:29:44.000Z","dependencies_parsed_at":"2022-08-07T08:15:17.953Z","dependency_job_id":null,"html_url":"https://github.com/ruanyl/react-keyboard","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freact-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freact-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freact-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ruanyl%2Freact-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ruanyl","download_url":"https://codeload.github.com/ruanyl/react-keyboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339022,"owners_count":20923004,"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":[],"created_at":"2024-11-05T14:40:29.713Z","updated_at":"2025-04-05T12:31:54.378Z","avatar_url":"https://github.com/ruanyl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n\nreact-keyboard is wrap of mousetrap.js in React, it offers keyboard shortcuts handling in React application.\n\n![react-keyboard](https://user-images.githubusercontent.com/486382/52902608-e9d3fa00-321b-11e9-8138-35ff1dcf6c3c.gif)\n\n## Getting started\n\n### Install\n\n```bash\nnpm install react-keyboard\n```\n\n### Usage Example \u003ca id=\"usage-example\"\u003e\u003c/a\u003e\n\n#### Defined keyMap\n\n```typescript\nconst keyMap = {\n  cmdK: {\n    combo: 'command+k',\n    eventType: 'keyup',\n  },\n  deleteNode: ['del', 'backspace'],\n  left: 'left',\n}\n```\n\nA KeyMap is an object which value is the key sequence. The key sequence can be:\n\n1. `string` which can be a single key  `left` or combination of keys `command+k`\n2. `array` which is an array of multiple key commands: `['del', 'backspace']`\n3. `object` only use an object if you need to listen to specific event type: `{combo: 'command+k', eventType: 'keyup'}`\n\n#### Use HotKeys Component\n\n```typescript\nimport { HotKeys, Handlers } from 'react-keyboard'\n\nexport class MyHotKeys extends React.Component {\n\n  showDocumentation = () =\u003e {\n    console.log('show doc')\n  }\n  deleteNode = () =\u003e {\n    console.log('deleted')\n  }\n  moveLeft = () =\u003e {\n    console.log('move left')\n  }\n  showChildDocumentation = () =\u003e {\n    console.log('show child doc')\n  }\n\n  handlersParent = {\n    cmdK: this.showDocumentation,\n    deleteNode: this.deleteNode,\n  }\n\n  handlersChild = {\n    cmdK: this.showChildDocumentation,\n    left: this.moveLeft,\n  }\n\n  render() {\n    return \u003cHotKeys keyMap={keyMap} handlers={this.handlersParent}\u003e\n      \u003cspan\u003ethis is my hotkeys\u003c/span\u003e\n      \u003cHotKeys handlers={this.handlersChild}\u003eA child\u003c/HotKeys\u003e\n    \u003c/HotKeys\u003e\n  }\n}\n```\n\nNote: Child HotKeys components can inherit `keyMap` from their parents. You don't necessarily define `keyMap` for each child if parents already have the shortcuts you need.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruanyl%2Freact-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fruanyl%2Freact-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fruanyl%2Freact-keyboard/lists"}