npmpackage.info

Gathering detailed insights and metrics for @reecelucas/react-use-hotkeys

Other packages similar to @reecelucas/react-use-hotkeys

react-hotkeys-hook

4.6.1

React hook for handling keyboard shortcuts

react-hotkeys

2.0.0

A declarative library for handling hotkeys and focus within a React application

hotkeys-js

3.13.7

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

react-hot-keys

2.7.3

React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.

Gathering detailed insights and metrics for @reecelucas/react-use-hotkeys

@reecelucas/react-use-hotkeys

React hook for creating simple keyboard shortcuts

2.0.0

116

MIT

TypeScript

1,036,568 2.8

Installations

npm install @reecelucas/react-use-hotkeys

Score

86.2

Supply Chain

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

4

Total

52

Closed

16

Merged

32

Issues

Open

2

Total

14

Closed

12

Releases

v2.0.0

Published on 27 Sept 2022

v1.3.5

Published on 02 Sept 2022

v1.3.4

Published on 26 Aug 2022

v1.3.3

Published on 10 May 2022

v1.3.2

Published on 05 May 2022

v1.3.1

Published on 11 Nov 2020

View all 7 releases

Developer

reecelucas

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

16.17.0

NPM Version

8.15.0 Statistics

116 Stars

81 Commits

8 Forks

1 Watching

11 Branches

2 Contributors

Updated on 21 Aug 2024

Languages

TypeScript (96.56%)

JavaScript (2.52%)

Shell (0.91%)

Total Downloads

Cumulative downloads

Total Downloads

1,036,568

Last day

23.1%

2,070

Compared to previous day

Last week

4.1%

9,955

Compared to previous week

Last month

-1.3%

42,701

Compared to previous month

Last year

14.2%

466,145

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-use-hotkeys

React hook for creating simple keyboard shortcuts.

npm bundle size (scoped) npm (scoped) GitHub

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

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

41 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-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
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-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 2024-11-18

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

Other packages similar to @reecelucas/react-use-hotkeys

Other packages similar to @reecelucas/react-use-hotkeys

@reecelucas/react-use-hotkeys

Installations

Score

Pull Requests

4

52

16

32

Issues

2

14

12

Releases

Developer

reecelucas

Developer Guide

CommonJS

Yes

16.17.0

8.15.0

Statistics

Languages

Total Downloads

1,036,568

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

react-use-hotkeys

Installation

Example Usage

Options

enabled

enableOnContentEditable

ignoredElementWhitelist

eventListenerOptions

Call Signature

Tests

LICENSE

10

10

10

0

0

0

0

0

0

0

0

0

2.8

/10

`enabled`

`enableOnContentEditable`

`ignoredElementWhitelist`

`eventListenerOptions`