{"id":15675144,"url":"https://github.com/codad5/keybinder","last_synced_at":"2025-05-06T23:43:16.481Z","repository":{"id":63155925,"uuid":"563582733","full_name":"codad5/keybinder","owner":"codad5","description":"This is a Javascript library that helps with listening to browser Keyboard changes, and also helps in managing keyboard shortcuts in the browser. browser keyboard controller ","archived":false,"fork":false,"pushed_at":"2022-12-25T08:48:59.000Z","size":216,"stargazers_count":15,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-25T00:39:15.340Z","etag":null,"topics":["dom","javascript","keybindings","keyboard","keyboard-events","shortcut-fusion","shortcuts-app","typescript"],"latest_commit_sha":null,"homepage":"https://codad5.github.io/keybinder","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/codad5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-08T23:02:39.000Z","updated_at":"2024-11-11T09:45:10.000Z","dependencies_parsed_at":"2023-01-30T21:46:05.120Z","dependency_job_id":null,"html_url":"https://github.com/codad5/keybinder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codad5%2Fkeybinder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codad5%2Fkeybinder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codad5%2Fkeybinder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codad5%2Fkeybinder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codad5","download_url":"https://codeload.github.com/codad5/keybinder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788388,"owners_count":21804280,"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":["dom","javascript","keybindings","keyboard","keyboard-events","shortcut-fusion","shortcuts-app","typescript"],"created_at":"2024-10-03T15:57:15.215Z","updated_at":"2025-05-06T23:43:16.465Z","avatar_url":"https://github.com/codad5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Key Bonder/Binder\r\n\r\n[![Watch the video](https://img.youtube.com/vi/lfLIXIBuCJs/hqdefault.jpg)](https://youtu.be/lfLIXIBuCJs)\r\n\r\nThis is a javascript library for frontend development (both vallina and frameworks) that helps with keyboard binding / combinations .\r\n\r\nThis currently supports most keys in `windows OS` you can visit the [Home page](https://codad5.github.io/keybinder/) to check the key code for your machine\r\n\r\n### Requirement\r\n\r\n- Your script need to be running on a web server, for development you could use,\r\n  - live server extension is vscode\r\n  - node npx server by running `npx serve`\r\n  - to avoid errors like\r\n  ![KeyBinder Cors error](.git/img/cors-error.png)\r\n\r\n## How to use\r\n\r\n### Install and Import\r\n\r\n#### Using Vallina javascript\r\n\r\n```html\r\n\u003cscript src=\"https://codad5.github.io/keybinder/lib/keybinder.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n#### Using a framework\r\n\r\n- Install\r\n\r\n```bash\r\nnpm i domkeybinder\r\n```\r\n\r\n- Import\r\n\r\n```js\r\nimport KeyBinder from 'domkeybinder'\r\n```\r\n\r\n### Initialize your controller object\r\n\r\n- Define your keyboard Controller\r\n\r\n```js\r\nconst keyController = new KeyBinder({\r\n    default_listener: 'keyup', // can be keydown, keypress\r\n    element: window, // can be any element or window eg `docmuent.querySelector('.myeditor')\r\n    // case_sensitive:true, // this is if you want to make the listener case sensitive\r\n    allow_default: true // this is set to default of false and prevents any default keyboard action\r\n})\r\n```\r\n\r\n- Add your listener\r\n\r\nFor easier and better coding experience it best to create a sub function like this\r\n\r\n```js\r\nconst ListenToKey = (key, ...data) =\u003e keyController.ListenToKey(key, ...data)\r\n```\r\n\r\nThen you can add listeners like this\r\n\r\n```js\r\nListenToKey('B+G', () =\u003e {\r\n    //your code...\r\n})\r\n\r\nListenToKey('shift+c', () =\u003e {\r\n    //your code...\r\n})\r\n\r\n```\r\n\r\n\u003e OR this\r\n\r\n```js\r\nkeyController.ListenToKey('enter', (data) =\u003e {\r\n    //your code...\r\n})\r\n\r\nkeyController.ListenToKey('ctrl+space', () =\u003e {\r\n    //your code...\r\n})\r\n```\r\n\r\n#### Diffrent Combination one action\r\n\r\nThis is if you want to one action(callback), tied to different combination\r\n\r\n```js\r\nListenToKey('ctrl+space', 'ctrl+m', () =\u003e {\r\n    alert(`your called ${data.combination}`)\r\n    document.querySelector('#scdiv').innerHTML += 'Do you mean Ctrl+c? try Ctrl+c'\r\n})\r\n```\r\n\r\n#### Avaliable methods\r\n\r\n| method | Description |\r\n| :---: | :---: |\r\n| ListenToKey | Add new Listener |\r\n| getCombinations | Get all avaliable combinations|\r\n| clear | Remove all avaliable combinations|\r\n| restore | Restore all previous avaliable combinations|\r\n\r\nCheck Our Test Website to see the avaliable key commands for\r\n\r\n| Key | listener - Command |\r\n| :---: | :---: |\r\n| Control | ctrl |\r\n| Shift | Shift |\r\n| Alt | Alt |\r\n| A | A |\r\n| A...Z | A...Z |\r\n| A...Z | A...Z |\r\n| \u003e | arrowup |\r\n1 | !\r\n1...9 | 1...9\r\nf1...f9 | f1...f9\r\nWindows - Home Buttom | meta\r\n| Listen to any other key | ***\r\n\r\n## Todos\r\n\r\n- [ ] Accept Your pull request ✔\r\n\r\n\u003e This is built by [Codad5](https://github.com/codad5) and [ptbysr](https://github.com/ptbysr) with ❤ and ⚡\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodad5%2Fkeybinder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodad5%2Fkeybinder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodad5%2Fkeybinder/lists"}