{"id":23159054,"url":"https://github.com/classfunc/use-hot-key-element","last_synced_at":"2025-04-04T18:41:54.625Z","repository":{"id":57388114,"uuid":"413760760","full_name":"ClassFunc/use-hot-key-element","owner":"ClassFunc","description":"Make Hot Key with element easier","archived":false,"fork":false,"pushed_at":"2023-08-12T04:57:11.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-11T07:19:43.932Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/use-hot-key-element","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/ClassFunc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-05T09:55:10.000Z","updated_at":"2021-10-06T07:28:26.000Z","dependencies_parsed_at":"2024-12-17T22:31:46.368Z","dependency_job_id":"4ddf8be2-2bfc-41fe-abc8-ffef7bc78ba9","html_url":"https://github.com/ClassFunc/use-hot-key-element","commit_stats":{"total_commits":13,"total_committers":2,"mean_commits":6.5,"dds":0.07692307692307687,"last_synced_commit":"ebbf5106f5eb18a7604086ac3b57c82394fd6812"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClassFunc%2Fuse-hot-key-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClassFunc%2Fuse-hot-key-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClassFunc%2Fuse-hot-key-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClassFunc%2Fuse-hot-key-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ClassFunc","download_url":"https://codeload.github.com/ClassFunc/use-hot-key-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234844,"owners_count":20905852,"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-12-17T22:28:51.212Z","updated_at":"2025-04-04T18:41:54.598Z","avatar_url":"https://github.com/ClassFunc.png","language":"JavaScript","readme":"### Tại sao?\n- [useKeyboardJs](https://github.com/streamich/react-use/blob/master/docs/useKeyboardJs.md) không giải quyết được vấn đề sử dụng phím tắt hoặc tổ hợp phím tắt với một html element cụ thể (ví dụ một textfield có id `#input-textfield`).\n- Thao tác với phím tắt luôn tuyệt vời hơn click chuột.\n\n### Cài đặt:\n```sh\nnpm i -S use-hot-key-element\nhoặc\nyarn add use-hot-key-element\n```\n\n### Sử dụng: \n\n```js\nimport React, {useEffect, useState} from 'react'\nimport useHotKey from 'use-hot-key-element'\n\nfunction Form(){\n  const [name, setName] = useState('')\n  \n  const [isNameInputEnterPressed] = useHotKey('enter', '#name-input')//khi nhấn phím enter trên element có id `name-input`\n  \n  useEffect(()=\u003e{\n    if(isNameInputEnterPressed) console.log(name) // log name khi enter trên `name-input`\n  },[isNameInputEnterPressed])\n  \n  return (\n    \u003cdiv\u003e\n      \u003cinput id=\"name-input\" value={name} onchange={(e)=\u003esetName(e.target.value)}/\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\n### API:\n- useHotKey`(keys: String|Array, domQuerySelectorOrFunc: String|Function)`\n- useCtrlWithKey`(key: String, domQuerySelectorOrFunc: String|Function)`\n- useShiftWithKey`(key: String, domQuerySelectorOrFunc: String|Function)`\n- useCtrlShiftWithKey`(key: String, domQuerySelectorOrFunc: String|Function)`\n- useCtrlEnter`(domQuerySelectorOrFunc: String|Function)`\n- useBackSpace`(domQuerySelectorOrFunc: String|Function)`\n\n\u003e Trong đó:\n- `key` là 1 tổ hợp phím hoặc 1 phím, ví dụ: `'z'`, `'ctrl+c'`, `'shift+enter'`, `'shift+meta+v'(cho mac)`. Các phím đặc biệt bao gồm `ctrl`(Mac: phím `control` hoặc `command`),`alt`(Mac: phím `option`), `shift`.\n- `keys` là một mảng của `key` sử dụng trong trường hợp lắng nghe nhiều `key` khác nhau, hoặc 1 `key`\n- `domQuerySelectorOrFunc` là [selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) của element, hoặc 1 function được thực hiện khi nhấn `key`\n\n### License:\nMIT\n\n### Author:\n[ClassFunc](https://classfunc.com)\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclassfunc%2Fuse-hot-key-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclassfunc%2Fuse-hot-key-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclassfunc%2Fuse-hot-key-element/lists"}