{"id":13455685,"url":"https://github.com/jaywcjlove/react-hotkeys","last_synced_at":"2025-05-14T17:09:22.512Z","repository":{"id":39033615,"uuid":"100389503","full_name":"jaywcjlove/react-hotkeys","owner":"jaywcjlove","description":"React component to listen to keydown and keyup keyboard events, defining and  dispatching keyboard shortcuts.","archived":false,"fork":false,"pushed_at":"2024-12-05T20:51:49.000Z","size":17359,"stargazers_count":429,"open_issues_count":21,"forks_count":22,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T14:30:18.715Z","etag":null,"topics":["hotkeys","javascript","keyboard","react-component","reactjs","shortcut"],"latest_commit_sha":null,"homepage":"https://jaywcjlove.github.io/react-hotkeys/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaywcjlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"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},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2017-08-15T15:08:06.000Z","updated_at":"2025-04-28T07:30:17.000Z","dependencies_parsed_at":"2022-09-19T22:32:54.656Z","dependency_job_id":"ea25a334-55af-46b4-8b23-039190a27720","html_url":"https://github.com/jaywcjlove/react-hotkeys","commit_stats":{"total_commits":185,"total_committers":9,"mean_commits":"20.555555555555557","dds":"0.21081081081081077","last_synced_commit":"09f8ea5e328bb9218f039b3649fd28d2561f0c60"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Freact-hotkeys","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Freact-hotkeys/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Freact-hotkeys/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Freact-hotkeys/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/react-hotkeys/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252419927,"owners_count":21745072,"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":["hotkeys","javascript","keyboard","react-component","reactjs","shortcut"],"created_at":"2024-07-31T08:01:09.337Z","updated_at":"2025-05-14T17:09:22.480Z","avatar_url":"https://github.com/jaywcjlove.png","language":"TypeScript","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["TypeScript"],"sub_categories":[],"readme":"react-hotkeys\n===\n\n[![NPM Downloads](https://img.shields.io/npm/dm/react-hot-keys.svg?style=flat)](https://www.npmjs.com/package/react-hot-keys)\n[![CI](https://github.com/jaywcjlove/react-hotkeys/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/react-hotkeys/actions/workflows/ci.yml)\n[![npm package](https://img.shields.io/npm/v/react-hot-keys.svg)](https://www.npmjs.org/package/react-hot-keys) [![Coveralls](https://jaywcjlove.github.io/react-hotkeys/coverage/badges.svg)](https://jaywcjlove.github.io/react-hotkeys/coverage/lcov-report/)\n\n\u003c!--dividing--\u003e\n\nReact component to listen to keydown and keyup keyboard events, defining and  dispatching keyboard shortcuts. Uses a fork of [hotkeys.js](https://github.com/jaywcjlove/hotkeys) for keydown detection of special characters. You give it a keymap of shortcuts \u0026 it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts.\n\n\u003e [react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook) - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.\n\n## Example\n\n### Install\n\n```sh\nnpm i -S react-hot-keys\n```\n\n### Demo\n\nPreview [demo](https://jaywcjlove.github.io/react-hotkeys/). \n\n- [Codepen example](https://codepen.io/jaywcjlove/pen/bJxbwG?editors=0010).\n- [CodesandBox Example](https://codesandbox.io/s/hotkeys-116-8rge8)\n\n```js\nimport React from 'react';\nimport Hotkeys from 'react-hot-keys';\n\nexport default class HotkeysDemo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      output: 'Hello, I am a component that listens to keydown and keyup of a',\n    }\n  }\n  onKeyUp(keyName, e, handle) {\n    console.log(\"test:onKeyUp\", e, handle)\n    this.setState({\n      output: `onKeyUp ${keyName}`,\n    });\n  }\n  onKeyDown(keyName, e, handle) {\n    console.log(\"test:onKeyDown\", keyName, e, handle)\n    this.setState({\n      output: `onKeyDown ${keyName}`,\n    });\n  }\n  render() {\n    return (\n      \u003cHotkeys \n        keyName=\"shift+a,alt+s\" \n        onKeyDown={this.onKeyDown.bind(this)}\n        onKeyUp={this.onKeyUp.bind(this)}\n      \u003e\n        \u003cdiv style={{ padding: \"50px\" }}\u003e\n          {this.state.output}\n        \u003c/div\u003e\n      \u003c/Hotkeys\u003e\n    )\n  }\n}\n```\n## API \n\n### keyName\n\nSupported keys `⇧`, `shift`, `option`, `⌥`, `alt`, `ctrl`, `control`, `command`, `⌘` .\n\n`⌘` Command()  \n`⌃` Control  \n`⌥` Option(alt)  \n`⇧` Shift  \n`⇪` Caps Lock   \n~~`fn` Function key is `fn` (not supported)~~  \n`↩︎` return/enter\n`space` space keys\n\n### onKeyDown\n\nCallback function to be called when user pressed the target buttons\n`space` space keys\n\n### onKeyUp\n\nCallback function to be called when user key uped the target buttons\n\n### allowRepeat\n\n\u003e allowRepeat?: boolean;\n\n`allowRepeat` to allow auto repeating key down\n\n\n### disabled\n\n\u003e disabled?: boolean;\n\nDisable `onKeyDown` and `onKeyUp` events. Default: `undefined`\n\n### filter\n\n`INPUT` `SELECT` `TEXTAREA` default does not handle. `filter` to return to the true shortcut keys set to play a role, flase shortcut keys set up failure.\n\n```diff\n \u003cHotkeys \n   keyName=\"shift+a,alt+s\" \n+   filter={(event) =\u003e {\n+     return true;\n+   }}\n   onKeyDown={this.onKeyDown.bind(this)}\n   onKeyUp={this.onKeyUp.bind(this)}\n /\u003e\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/jaywcjlove/react-hotkeys/graphs/contributors\"\u003e\n  \u003cimg src=\"https://jaywcjlove.github.io/react-hotkeys/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nLicensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Freact-hotkeys","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2Freact-hotkeys","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Freact-hotkeys/lists"}