npmpackage.info

Gathering detailed insights and metrics for reakeys

reakeys - 2.0.6 | npmpackage.info

reakeys

⌨️ React Hotkeys Hook. Maintained by @goodcodeus.

2.0.6

Apache-2.0

TypeScript

46.96 kB

2.9

Installations

npm install reakeys

Developer Guide

BETA

Typescript

Yes

Module System

ESM, UMD

Node Version

18.20.8

NPM Version

10.8.2 Pull Requests

Open

0

Total

22

Closed

0

Merged

22

Issues

Open

1

Total

11

Closed

10

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

Shell

TypeScript (96.67%)

JavaScript (2.98%)

Shell (0.36%)

Developer

reaviz

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

69 Stars

140 Commits

12 Forks

4 Watchers

8 Branches

8 Contributors

Updated on Jun 25, 2025

Maintainers

View All 8 Contributors

Package Meta Information

Latest Version

2.0.6

Package Id

reakeys@2.0.6

Unpacked Size

46.96 kB

Size

11.88 kB

File Count

NPM Version

10.8.2

Node Version

18.20.8

Published on

Apr 14, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

⌨️ reakeys

React Hook for Ctrl-keys Hotkeys

🚀 Quick Links

Checkout the demos

📦 Usage

Install via NPM:

yarn add reakeys

Then in your component, just add the useHotkeys hook and specify your keys like:

1import React, { FC } from 'react';
2import { useHotkeys } from 'reakeys';
3
4export const YourComponent: FC = () => {
5  useHotkeys([
6    {
7      name: 'Dashboard',
8      keys: 'mod+shift+d',
9      category: 'Navigation',
10      callback: event => {
11        event.preventDefault();
12        history.push('/dashboard');
13      }
14    }
15  ]);
16};

Below are the options you can set in the hook array:

1type HotkeyShortcuts = {
2  name: string;
3  category?: string;
4  description?: string;
5  keys: string | string[];
6  ref?: any;
7  hidden?: boolean;
8  disabled?: boolean;
9  callback: (e: ExtendedKeyboardEvent, combo: string) => void;
10  action?: 'keypress'| 'keydown'| 'keyup';
11};

You can also get all the hotkeys that are registered by just calling the useHotkeys hook and it will return the current hotkeys.

1const hotkeys = useHotkeys();

This is useful for creating a dialog to present the user with all the options. Below is an example of how to make a dialog using reablocks:

1import React, { useState, FC, useCallback, useMemo } from 'react';
2import { Dialog } from 'reablocks';
3import { useHotkeys, getHotkeyText } from 'reakeys';
4import groupBy from 'lodash/groupBy';
5import sortBy from 'lodash/sortBy';
6
7export const HotkeyCombos: FC = () => {
8  // useHotkeys returns the same object if the hotkeys haven't changed, meaning
9  // that you can use useMemo to avoid expensive recalculation in that case.
10  //
11  // Note that the object will change if another component passes a different
12  // object to their useHotkeys, even if that component doesn't actually change
13  // anything. In React <18, it will cause two re-renders in a row.
14  //
15  // There is another long comment at the bottom of this example explaining why
16  // useMemo is important.
17
18  const hotkeys = useHotkeys();
19  const categories = useMemo(() => groupBy(hotkeys, 'category'), [hotkeys]);
20
21  const sorted = useMemo(() => Object.keys(categories).reduce((prev, cur) => {
22    const category = sortBy(categories[cur], 'name');
23    const label = cur === 'undefined' ? 'General' : cur;
24
25    return {
26      ...prev,
27      [label]: category.filter(k => !k.hidden)
28    };
29  }, {}), [categories]);
30
31  const { General, ...rest } = sorted as any;
32  const others = sortBy(Object.keys(rest || {}));
33
34  const renderKeyCode = useCallback(keyCode => {
35    const wrapped = Array.isArray(keyCode) ? keyCode : [keyCode];
36    const formatted = wrapped.map(k => getHotkeyText(k));
37
38    return (
39      <div className={css.keyComboContainer}>
40        {formatted.map((k, i) => (
41          <kbd key={i} className={css.keyCombo}>
42            {k}
43          </kbd>
44        ))}
45      </div>
46    );
47  }, []);
48
49  const renderGroups = useCallback(
50    group => {
51      if (!sorted[group]) {
52        return null;
53      }
54
55      return (
56        <div key={group}>
57          <h3>{group}</h3>
58          <ul className={css.list}>
59            {sorted[group].map(kk => (
60              <li key={kk.name} className={css.listItem}>
61                <label>{kk.name}</label>
62                {renderKeyCode(kk.keys)}
63                {kk.description && <p>{kk.description}</p>}
64              </li>
65            ))}
66          </ul>
67        </div>
68      );
69    },
70    [renderKeyCode, sorted]
71  );
72
73  return (
74    <div className={css.groups}>
75      {renderGroups('General')}
76      {others.map(renderGroups)}
77    </div>
78  );
79};
80
81export const HotkeyDialog: FC = () => {
82  const [visible, setVisible] = useState<boolean>(false);
83  const openDialog = useCallback(() => setVisible(true), [setVisible]);
84  const closeDialog = useCallback(() => setVisible(false), [setVisible]);
85
86  // If your hotkeys haven't changed, it's important to provide the same object
87  // to useHotkeys, or else it will remove and replace your hotkeys.
88  //
89  // That isn't always a bad thing, and works perfectly fine, but it would cause
90  // unnecessary updates if other components also call useHotkeys() to retrieve
91  // the list of hotkeys, because this component would update it every render.
92  //
93  // Ideally, you should only change the object passed to useHotkeys when the
94  // actual hotkeys have changed (name for instance, when using i18n).
95  // useMemo is good for this.
96
97  useHotkeys(useMemo(() => [
98    {
99      name: 'Hotkey Dialog',
100      keys: 'SHIFT+?',
101      hidden: true,
102      callback: openDialog
103    }
104  ], [openDialog]));
105
106  const combosRenderer = useCallback(() => <HotkeyCombos />, [HotkeyCombos]);
107
108  return (
109    <Dialog
110      size="800px"
111      header="Hotkeys"
112      open={visible}
113      onClose={closeDialog}
114    >
115      {combosRenderer}
116    </Dialog>
117  );
118};

You can also get a formatted version of the hotkey combo text:

1import { getHotkeyText } from 'reakeys';
2
3getHotkeyText('mod+shift+a'); //=> '⌘+⇧+a'

🔭 Development

If you want to run reakeys locally, its super easy!

Clone the repo
yarn install
yarn start
Browser opens to Storybook page

❤️ Contributors

Thanks to all our contributors!

No vulnerabilities found.

10

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

2

Maintained

Determines if the project is "actively maintained".

2

Code-Review

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

1

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/build.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/build.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/npm-publish.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm-publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/npm-publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/reaviz/reakeys/release.yml/master?enable=pin
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 1 out of 1 npmCommand dependencies pinned

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

Token-Permissions

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

44 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
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-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
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-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-c24v-8rfc-w8vw
Warn: Project is vulnerable to: GHSA-8jhw-289h-jh2g
Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.9

/10

Last Scanned on 2025-06-30

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

reakeys

Installations

Developer Guide

Yes

ESM, UMD

18.20.8

10.8.2

Pull Requests

0

22

0

22

Issues

1

11

10

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

⌨️ reakeys

🚀 Quick Links

📦 Usage

🔭 Development

❤️ Contributors

10

10

10

2

2

1

0

0

0

0

0

0

0

2.9

/10