Gathering detailed insights and metrics for @reecelucas/react-use-hotkeys
Gathering detailed insights and metrics for @reecelucas/react-use-hotkeys
Installations
npm install @reecelucas/react-use-hotkeysDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.17.0
NPM Version
8.15.0
Score
82.3
Supply Chain
100
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
7
Contributors
2
Unable to fetch Contributors
Languages
3
TypeScript
JavaScript
Shell
TypeScript (96.56%)
JavaScript (2.52%)
Shell (0.91%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
reecelucas
Download Statistics
Total Downloads
1,135,194
Last Day
1,329
Last Week
9,400
Last Month
40,697
Last Year
467,886
GitHub Statistics
MIT License
116 Stars
81 Commits
8 Forks
1 Watchers
11 Branches
2 Contributors
Updated on Aug 21, 2024
Bundle Size
2.73 kB
Minified
1.29 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
@reecelucas/react-use-hotkeys@2.0.0
Unpacked Size
29.88 kB
Size
7.11 kB
File Count
47
NPM Version
8.15.0
Node Version
16.17.0
Total Downloads
Cumulative downloads
Total Downloads
1,135,194
Last Day
-21.9%
1,329
Compared to previous day
Last Week
-4.9%
9,400
Compared to previous week
Last Month
33.5%
40,697
Compared to previous month
Last Year
6.9%
467,886
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
26
@babel/core@babel/preset-env@babel/preset-react@babel/preset-typescript@commitlint/cli@commitlint/config-conventional@storybook/builder-webpack4@storybook/manager-webpack4@storybook/react@testing-library/react@types/jest@types/react@typescript-eslint/eslint-plugin@typescript-eslint/parserbabel-jestbabel-loadercoverallseslinteslint-config-prettierhuskyjestjest-environment-jsdomprettierreactreact-domtypescript
react-use-hotkeys
React hook for creating simple keyboard shortcuts.
Installation
1npm install @reecelucas/react-use-hotkeys
Example Usage
1import useHotkeys from "@reecelucas/react-use-hotkeys";
All hotkey combinations must use valid KeyBoardEvent "key" values. A full list can be found on MDN and Wes Bos has created a great interactive lookup.
1// Single keys 2useHotkeys("Escape", () => { 3 console.log("Some action"); 4}); 5 6useHotkeys("F7", () => { 7 console.log("Some action"); 8}); 9 10// Modifier combinations 11useHotkeys("Meta+Shift+z", () => { 12 console.log("Some action"); 13}); 14 15// Key sequences 16useHotkeys("w s d", () => { 17 console.log("Some action"); 18}); 19 20useHotkeys('w " " d', () => { 21 // space key in sequence (`w ' ' d` also works) 22 console.log("Some action"); 23}); 24 25// Multiple key combinations mapped to the same callback 26useHotkeys(["Control+z", "Meta+z"], () => { 27 console.log("Some action"); 28}); 29 30useHotkeys(["a", "Meta+z", "w s d"], () => { 31 console.log("Some action"); 32});
The following patterns are not supported:
1// Modifier keys in sequences 2useHotkeys("Control i d", () => { 3 console.log("I won't run!"); 4}); 5 6// Modifier combinations in sequences 7useHotkeys("Control+z i d", () => { 8 console.log("I won't run!"); 9});
If you find a use case where the API is too restrictive you can use the escape hatch to perform whatever custom logic you need:
1useHotkeys("*", (event) => { 2 console.log("I will run on every keydown event"); 3 4 if (customKeyLogic(event)) { 5 console.log("some action"); 6 } 7});
Options
enabled
You can disable the hook by passing enabled: false. When disabled the hook will stop listening for keydown events:
1useHotkeys( 2 "Escape", 3 () => { 4 console.log("I won't run!"); 5 }, 6 { enabled: false } 7);
enableOnContentEditable
By default, the hook will ignore keydown events originating from elements with the contenteditable attribute, since this behaviour is normally what you want. If you want to override this behaviour you can pass enableOnContentEditable: true:
1useHotkeys( 2 "Escape", 3 () => { 4 console.log("Some action"); 5 }, 6 { enableOnContentEditable: true } 7);
ignoredElementWhitelist
By default, the hook will ignore keydown events originating from INPUT and TEXTAREA elements, since this behaviour is normally what you want. If you want to override this behaviour you can use ignoredElementWhitelist:
1useHotkeys( 2 "Escape", 3 () => { 4 console.log("I will now run on input elements"); 5 }, 6 { ignoredElementWhitelist: ["INPUT"] } 7); 8 9useHotkeys( 10 "Escape", 11 () => { 12 console.log("I will now run on input and textarea elements"); 13 }, 14 { ignoredElementWhitelist: ["INPUT", "TEXTAREA"] } 15);
eventListenerOptions
You can pass AddEventListenerOptions if you need to listen for keydown events in the capturing phase:
1useHotkeys( 2 "Escape", 3 () => { 4 console.log("I will run in the capturing phase"); 5 }, 6 { 7 eventListenerOptions: { 8 capture: true, 9 }, 10 } 11);
Call Signature
1useHotkeys( 2 hotkeys: string | string[], 3 callback: (event: KeyboardEvent) => void, 4 options?: { 5 enabled?: boolean; 6 enableOnContentEditable?: boolean; 7 ignoredElementWhitelist?: ("INPUT" | "TEXTAREA")[]; 8 eventListenerOptions?: AddEventListenerOptions; 9 } 10) => void;
Tests
Tests use Jest and react-testing-library.
1git clone git@github.com:reecelucas/react-use-hotkeys.git 2cd react-use-hotkeys 3yarn 4yarn test
LICENSE
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-and-publish.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/reecelucas/react-use-hotkeys/build.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-and-publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/reecelucas/react-use-hotkeys/release-and-publish.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-and-publish.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/reecelucas/react-use-hotkeys/release-and-publish.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Reason
44 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.8
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More