{"id":17349671,"url":"https://github.com/yuanguandong/react-keyevent","last_synced_at":"2026-03-07T22:32:43.968Z","repository":{"id":57333670,"uuid":"383821183","full_name":"yuanguandong/react-keyevent","owner":"yuanguandong","description":"An easy-to-use keyboard event react component, Package size less than 3kb","archived":false,"fork":false,"pushed_at":"2022-05-05T10:27:57.000Z","size":3186,"stargazers_count":48,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-17T23:55:51.456Z","etag":null,"topics":["awesome-reactjs","event","js","key-value","keyboard","keyboard-events","keyboard-listeners","keyboard-shortcuts","keyevent","keys","react","tsx"],"latest_commit_sha":null,"homepage":"https://react-keyevent.netlify.app/","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/yuanguandong.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":"2021-07-07T14:10:50.000Z","updated_at":"2025-04-17T06:31:40.000Z","dependencies_parsed_at":"2022-09-01T12:02:52.880Z","dependency_job_id":null,"html_url":"https://github.com/yuanguandong/react-keyevent","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/yuanguandong/react-keyevent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Freact-keyevent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Freact-keyevent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Freact-keyevent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Freact-keyevent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanguandong","download_url":"https://codeload.github.com/yuanguandong/react-keyevent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanguandong%2Freact-keyevent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30234658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["awesome-reactjs","event","js","key-value","keyboard","keyboard-events","keyboard-listeners","keyboard-shortcuts","keyevent","keys","react","tsx"],"created_at":"2024-10-15T16:56:33.939Z","updated_at":"2026-03-07T22:32:43.947Z","avatar_url":"https://github.com/yuanguandong.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Keyevent\n[![npm version](https://badge.fury.io/js/react-keyevent.svg)](#) [![npm version](https://img.shields.io/badge/react-%3E16-green)](#)[![npm version](\thttps://img.shields.io/github/issues/yuanguandong/react-keyevent)](#) [![npm version](\thttps://img.shields.io/github/forks/yuanguandong/react-keyevent)](#) [![npm version](https://img.shields.io/github/license/yuanguandong/react-keyevent)](#) [![npm version](\thttps://img.shields.io/github/stars/yuanguandong/react-keyevent)](#)\n### An easy-to-use keyboard event react component, Can achieve a variety of custom keyboard functions, Package size less than 3kb\n非常容易使用的一个键盘事件监听react组件，可实现各种自定义快捷键功能，只有不到3kb\n\n![repository-open-graph-template副本](https://user-images.githubusercontent.com/13197560/125153789-c44b4080-e188-11eb-829e-307a738ad92b.png)\n\n\n### Repository\nhttps://github.com/yuanguandong/react-keyevent\n\n\n### Live demo\nhttps://react-keyevent.netlify.app/ \n\nhttps://yuanguandong.github.io/react-keyevent/\n\n## Live code\n\n[![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-keyevent-8ny11s?file=/src/App.tsx)\n\n\n### Install\n```bash\nnpm i react-keyevent -S\n```\n\n### How to use\n```js\nimport React, { useState } from \"react\";\nimport Keyevent from \"react-keyevent\";\n\nconst TopSide = () =\u003e {\n  const [count, setCount] = useState(0);\n  const onAltT = () =\u003e {\n    setCount(count + 1);\n  };\n  return (\n    \u003cKeyevent\n      className=\"TopSide\"\n      events={{\n        onAltT,\n      }}\n      needFocusing\n    \u003e\n      \u003cspan className=\"tip\"\u003eClick To Focusing\u003c/span\u003e\n      \u003cdiv className=\"group\"\u003e\n        \u003cspan className=\"key\"\u003eAlt\u003c/span\u003e\n        \u003cspan className=\"key\"\u003eT\u003c/span\u003e\n        \u003cspan className=\"count\"\u003e{count}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/Keyevent\u003e\n  );\n};\nexport default TopSide\n```\n\n### Props\n\n| property     | required | type                                          | defaultValue | description                                                  |\n| ------------ | -------- | --------------------------------------------- | ------------ | ------------------------------------------------------------ |\n| events       | true     | { [key: string]: (e: KeyboardEvent) =\u003e void } | null         | The binding keyboard events 绑定的键盘事件                                               |\n| needFocusing | false    | boolean                                       | false        | 是否需要聚焦，若值为true,则需要聚焦Focus这个容器组件（点击） |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanguandong%2Freact-keyevent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanguandong%2Freact-keyevent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanguandong%2Freact-keyevent/lists"}