{"id":24480597,"url":"https://github.com/lifespikes/react-keybinds","last_synced_at":"2025-04-13T15:36:35.556Z","repository":{"id":63324553,"uuid":"566124559","full_name":"lifespikes/react-keybinds","owner":"lifespikes","description":"A lightweight library to manage keyboard shortcuts for your React application","archived":false,"fork":false,"pushed_at":"2024-06-18T07:00:54.000Z","size":2626,"stargazers_count":14,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T06:34:37.431Z","etag":null,"topics":["keybinds","keyboard","lifespikes","react","shortcuts","shortcuts-app"],"latest_commit_sha":null,"homepage":"","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/lifespikes.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":"2022-11-15T02:26:24.000Z","updated_at":"2024-10-29T19:31:43.000Z","dependencies_parsed_at":"2024-03-31T02:21:52.167Z","dependency_job_id":"e341c4f7-cf25-4924-a499-ad53f2227274","html_url":"https://github.com/lifespikes/react-keybinds","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifespikes%2Freact-keybinds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifespikes%2Freact-keybinds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifespikes%2Freact-keybinds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifespikes%2Freact-keybinds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifespikes","download_url":"https://codeload.github.com/lifespikes/react-keybinds/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248737627,"owners_count":21153809,"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":["keybinds","keyboard","lifespikes","react","shortcuts","shortcuts-app"],"created_at":"2025-01-21T11:16:31.416Z","updated_at":"2025-04-13T15:36:35.528Z","avatar_url":"https://github.com/lifespikes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://user-images.githubusercontent.com/67383906/202308279-365ced49-ad3a-4f14-a272-fe8c0e080e2c.png)\n\n# react-keybinds\n\n[\u003cimg src=\"https://img.shields.io/npm/v/react-keybinds?style=for-the-badge\"\u003e](https://www.npmjs.com/package/react-keybinds)\n\u003cimg src=\"https://img.shields.io/npm/types/react-keybinds?label=%20\u0026amp;logo=typescript\u0026amp;logoColor=white\u0026amp;style=for-the-badge\"\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/react-keybinds?style=for-the-badge\" \u003e\n[\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-keybinds?style=for-the-badge\"\u003e](https://bundlephobia.com/package/react-keybinds)\n\nA lightweight library to manage keyboard shortcuts for your React application\n\n# Install\n\n#### Using npm\n\n```bash\nnpm i react-keybinds\n```\n\n#### Using Yarn\n\n```bash\nyarn add react-keybinds\n```\n\n#### Using pnpm\n\n```bash\npnpm add react-keybinds\n```\n\n# Usage\n\n\u003csub\u003eYou can take a look at the [example](./example) \u003c/sub\u003e\n\n### 1. Configuring the KeyBind provider\n\n```tsx\nimport {KeyBindProvider} from 'react-keybinds';\n\nconst App = () =\u003e {\n    return (\n        \u003cKeyBindProvider\u003e\n            hello world\n        \u003c/KeyBindProvider\u003e\n    );\n};\n```\n\n\u003csub\u003eIt is recommended that you place the provider at the beginning of the component tree.\n\u003c/sub\u003e\n\n\u003csub\u003eBy default, the provider will have a debounce on key presses events of 1000ms, you can change this value by passing the `debounce` prop to the provider\u003c/sub\u003e\n\n```tsx\nconst App = () =\u003e {\n  return (\n          \u003cKeyBindProvider debounce={500}\u003e\n            hello world\n          \u003c/KeyBindProvider\u003e\n  );\n}\n```\n\n### 2. Global shortcuts\n\nYou can register commands globally\n\n```tsx\nimport {KeyBindProvider, ShortcutType} from 'react-keybinds';\n\nconst GLOBAL_COMMANDS: ShortcutType[] = [\n    {\n        keys: {\n            Mac: ['Control', 'Shift', 'P'],\n            Windows: ['Control', 'Shift', 'P'],\n        },\n        label: 'Test command',\n        callback: () =\u003e {\n            alert('Hello world');\n        },\n    },\n];\n\nconst App = () =\u003e {\n    return (\n        \u003cKeyBindProvider shortcuts={GLOBAL_COMMANDS}\u003e\n            hello world\n        \u003c/KeyBindProvider\u003e\n    );\n};\n```\n\n### 3. Register shortcuts\n\nYou can register a command in a specific part of your application. This is useful when we want to execute logic from a\nhandler that exists in a specific component.\n\n```tsx\nimport {KeyBindProvider, useKeyBind} from 'react-keybinds';\n\nconst RegisterShortcutButton = () =\u003e {\n    const {registerShortcut} = useKeyBind();\n\n    const handleClickRegister = () =\u003e {\n        registerShortcut({\n            keys: {\n                Mac: ['Shift', '*', '_'],\n            },\n            label: 'This is a keyboard shortcut',\n            callback: () =\u003e {\n                alert('Hello world');\n            },\n        });\n    };\n\n    return (\n        \u003cdiv\u003e\n            \u003cbutton onClick={handleClickRegister}\u003eRegister shortcut\u003c/button\u003e\n        \u003c/div\u003e\n    );\n};\n\nconst App = () =\u003e {\n    return (\n        \u003cKeyBindProvider\u003e\n            \u003cRegisterShortcutButton/\u003e\n        \u003c/KeyBindProvider\u003e\n    );\n};\n```\n\nYou can also register a shortcut when a component is mounted. Like this:\n\n\u003csub\u003eWhen you use the `useRegisterShortcut` hook it is necessary to use the `useMemo` hook\u003c/sub\u003e\n```tsx\nimport * as React from 'react';\nimport {useMemo, useState} from 'react';\nimport {ShortcutType, useKeyBind, useRegisterShortcut} from 'react-keybinds';\nimport inspire from '../data/inspire';\n\nconst RegisterOnMount = () =\u003e {\n    const [text, setText] = useState(inspire[0]);\n\n    const {getKeysByPlatform} = useKeyBind();\n\n    const shortcut: ShortcutType = useMemo(\n        () =\u003e ({\n            keys: {\n                Windows: ['Control', 'Enter'],\n            },\n            label: 'Inspired command',\n            callback: () =\u003e {\n                const randomIndex = Math.floor(Math.random() * inspire.length);\n                setText(inspire[randomIndex]);\n            },\n        }),\n        []\n    );\n\n    useRegisterShortcut(shortcut); // register on mount\n\n    const keysForInspire = getKeysByPlatform(shortcut);\n\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eInspire command\u003c/h1\u003e\n            \u003cp\u003e\n                Press: \u003cstrong\u003e{keysForInspire?.keys?.join(' + ')}\u003c/strong\u003e{' '}\n            \u003c/p\u003e\n            \u003cblockquote\u003e{`\"${text}\"`}\u003c/blockquote\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default RegisterOnMount;\n\n```\n\n### 4. List registered shortcuts\n\nYou can list the registered shortcuts using the useKeyBind hook\n\n```tsx\nimport {KeyBindProvider, useKeyBind} from 'react-keybinds';\n\nconst ShowShortcuts = () =\u003e {\n    const {shortcuts} = useKeyBind();\n    const shortcutsList = shortcuts?.map((shortcut, index) =\u003e {\n        return (\n            \u003cdiv key={index}\u003e\n                \u003cspan\u003e{shortcut.label}\u003c/span\u003e\n                \u003cul\u003e\n                    {Object.entries(shortcut.keys).map(([key, values], i) =\u003e (\n                        \u003cli key={`${key}-${i}`}\u003e\n                            {key}: \u003cstrong\u003e{values.join(' + ')}\u003c/strong\u003e\n                        \u003c/li\u003e\n                    ))}\n                \u003c/ul\u003e\n            \u003c/div\u003e\n        );\n    });\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eRegistered Shortcuts\u003c/h1\u003e\n            {shortcutsList}\n        \u003c/div\u003e\n    );\n};\nconst App = () =\u003e {\n    return (\n        \u003cKeyBindProvider\u003e\n            \u003cShowShortcuts/\u003e\n        \u003c/KeyBindProvider\u003e\n    );\n};\n```\n\n## Notes\n\n- If a user is using a platform for which you did not specify the keys, it will default to the keys of a platform that\n  you have configured.\n  If you want to see which platform the keys will be taken from, you can use the `getKeysByPlatform` method.\n\n```tsx\nconst shortcut: ShortcutType = useMemo(\n    () =\u003e ({\n        keys: {\n            Windows: ['Control', 'Enter'],\n        },\n        label: 'Inspired command',\n        callback: () =\u003e {\n        },\n    }),\n    []\n);\n\nconst informationForInspire = getKeysByPlatform(shortcut); // {platform: 'Windows', keys: ['Control', 'Enter']}\n```\n\n- If you want to have more information about the current platform, you can use the usePlatform hook\n```tsx\nimport { usePlatform } from 'react-keybinds';\n\nconst App = () =\u003e {\n    const platform = usePlatform();\n    return (\n        \u003cdiv\u003e\n            \u003ch1\u003eCurrent platform: {platform.currentPlatform()}\u003c/h1\u003e\n            \u003ch1\u003eIs Windows: {platform.isWindows()}\u003c/h1\u003e\n        \u003c/div\u003e\n    );\n};\n```\n\n- If you want to take a look at a list of all the keys for different platforms, you can use the following [link](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifespikes%2Freact-keybinds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifespikes%2Freact-keybinds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifespikes%2Freact-keybinds/lists"}