{"id":13496229,"url":"https://github.com/Kelin2025/effector-hotkey","last_synced_at":"2025-03-28T18:31:39.754Z","repository":{"id":41051922,"uuid":"475635012","full_name":"Kelin2025/effector-hotkey","owner":"Kelin2025","description":"Hotkeys with Effector made easy","archived":false,"fork":false,"pushed_at":"2024-02-19T14:35:11.000Z","size":641,"stargazers_count":38,"open_issues_count":6,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T04:51:11.902Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Kelin2025.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2022-03-29T22:10:25.000Z","updated_at":"2024-07-25T11:34:16.000Z","dependencies_parsed_at":"2024-04-18T12:51:42.690Z","dependency_job_id":"2ac9d8fe-dfcc-4a0f-aa4c-a5eec0714c82","html_url":"https://github.com/Kelin2025/effector-hotkey","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kelin2025%2Feffector-hotkey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kelin2025%2Feffector-hotkey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kelin2025%2Feffector-hotkey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kelin2025%2Feffector-hotkey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kelin2025","download_url":"https://codeload.github.com/Kelin2025/effector-hotkey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246080580,"owners_count":20720555,"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-07-31T19:01:44.187Z","updated_at":"2025-03-28T18:31:39.224Z","avatar_url":"https://github.com/Kelin2025.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Packages"],"sub_categories":[],"readme":"# Effector-hotkey\n\nHotkeys with Effector made easy\n\n- Easy-to-use, no need to implement by yourself\n- Supports both Windows/MacOS style hotkeys\n- Doesn't break if using with SSR\n\n## Installation\n\n```bash\nnpm i effector-hotkey\n```\n\n## Usage\n\n```tsx\nimport { hotkey } from 'effector-hotkey';\n\nconst copyPressed = hotkey({ key: 'Ctrl+C' });\n\nsample({\n  clock: copyPressed,\n  source: $formData,\n  target: saveFx,\n});\n```\n\n## Customization\n\n#### Specifying event type\n\n```tsx\nimport { hotkey } from 'effector-hotkey';\n\nconst spaceDown = hotkey({ key: 'Space', type: 'keydown' });\nconst spaceUp = hotkey({ key: 'Space', type: 'keyup' });\nconst spacePress = hotkey({ key: 'Space', type: 'keypress' });\n```\n\n#### Shortcut\n\n```tsx\nimport { hotkey } from 'effector-hotkey';\n\nconst copyPressed = hotkey('Ctrl+C');\nconst spaceDown = hotkey('Space', 'keydown');\n```\n\n#### `filter` prop\n\n```tsx\nimport { hotkey } from 'effector-hotkey';\nimport { createStore } from 'effector';\n\nconst $isConfirmModalOpened = createStore(true);\n\nhotkey({\n  key: 'Y',\n  filter: $isConfirmModalOpened,\n  target: removeFx,\n});\n\nhotkey({\n  key: 'N',\n  filter: $isConfirmModalOpened,\n  target: closeModal,\n});\n```\n\n#### `target` prop\n\nIf you want to just trigger something instead of listening to event, you can use `target` prop:\n\n```tsx\nimport { sample } from 'effector';\nimport { hotkey } from 'effector-hotkey';\n\nhotkey({\n  key: 'Ctrl+C',\n  target: copyTextFx,\n});\n// \u003c=\u003e\nsample({\n  clock: hotkey('Ctrl+C'),\n  target: copyTextFx,\n});\n```\n\n## Extra\n\n#### `keyup`, `keydown`, `keypress` events\n\nYou can use internal wrappers for native events as well\n\n```tsx\nimport { keyup, keydown, keypress } from 'effector-hotkey';\n\nkeyup.watch(console.log); // KeyboardEvent\n```\n\n#### `$isShiftDown`, `$isCtrlDown`, `$isAltDown`\n\nYou can also use pre-made stores to track if `Shift`/`Ctrl`/`Alt` buttons are held\n\nSimple use-case: display hotkeys in UI while holding `Ctrl`\n\n```tsx\nimport { useStore } from 'effector-react';\nimport { hotkey, $isCtrlDown } from 'effector-hotkey';\n\nconst SubmitButton = () =\u003e {\n  const isCtrlDown = useStore($isCtrlDown);\n\n  return (\n    \u003cButton onClick={savePressed}\u003e{isCtrlDown ? 'Ctrl+S' : 'Save'}\u003c/Button\u003e\n  );\n};\n\nconst savePressed = createEvent\u003cMouseEvent\u003e();\n\nsample({\n  clock: [savePressed, hotkey('Ctrl+S')],\n  target: saveFx,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKelin2025%2Feffector-hotkey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKelin2025%2Feffector-hotkey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKelin2025%2Feffector-hotkey/lists"}