npmpackage.info

react-hot-keys

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

2.7.3

415

TypeScript

4.00 kB

3,533,440 4.7

Installations

npm install react-hot-keys

Pull Requests

Open

3

Total

76

Closed

35

Merged

38

Issues

Open

15

Total

32

Closed

17

Releases

v2.7.3

Published on 17 Dec 2023

v2.7.2

Published on 08 Apr 2022

v2.7.1

Published on 10 Sept 2021

v2.7.0

Published on 03 Sept 2021

v2.6.0

Published on 15 Jun 2020

v2.4.1

Published on 26 Nov 2019

View all 12 releases

Developer

jaywcjlove

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.19.0

NPM Version

10.2.3 Statistics

415 Stars

192 Commits

22 Forks

5 Watching

5 Branches

6 Contributors

Updated on 29 Oct 2024

Bundle Size

9.57 kB

Minified

4.00 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (88.28%)

Less (7.94%)

HTML (3.78%)

Total Downloads

Cumulative downloads

Total Downloads

3,533,440

Last day

0.5%

3,535

Compared to previous day

Last week

-2.5%

18,182

Compared to previous week

Last month

5.2%

80,292

Compared to previous month

Last year

4.7%

825,421

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

react-hotkeys

React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of hotkeys.js for keydown detection of special characters. You give it a keymap of shortcuts & it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts.

react-hotkeys-hook - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.

Example

Install

1npm i -S react-hot-keys

Demo

Preview demo.

1import React from 'react';
2import Hotkeys from 'react-hot-keys';
3
4export default class HotkeysDemo extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = {
8      output: 'Hello, I am a component that listens to keydown and keyup of a',
9    }
10  }
11  onKeyUp(keyName, e, handle) {
12    console.log("test:onKeyUp", e, handle)
13    this.setState({
14      output: `onKeyUp ${keyName}`,
15    });
16  }
17  onKeyDown(keyName, e, handle) {
18    console.log("test:onKeyDown", keyName, e, handle)
19    this.setState({
20      output: `onKeyDown ${keyName}`,
21    });
22  }
23  render() {
24    return (
25      <Hotkeys 
26        keyName="shift+a,alt+s" 
27        onKeyDown={this.onKeyDown.bind(this)}
28        onKeyUp={this.onKeyUp.bind(this)}
29      >
30        <div style={{ padding: "50px" }}>
31          {this.state.output}
32        </div>
33      </Hotkeys>
34    )
35  }
36}

API

keyName

Supported keys ⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘ .

⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock
~~fn Function key is fn (not supported)~~
↩︎ return/enter space space keys

onKeyDown

Callback function to be called when user pressed the target buttons space space keys

onKeyUp

Callback function to be called when user key uped the target buttons

allowRepeat

allowRepeat?: boolean;

allowRepeat to allow auto repeating key down

disabled

disabled?: boolean;

Disable onKeyDown and onKeyUp events. Default: undefined

filter

INPUT SELECT TEXTAREA default does not handle. filter to return to the true shortcut keys set to play a role, flase shortcut keys set up failure.

1 <Hotkeys 
2   keyName="shift+a,alt+s" 
3+   filter={(event) => {
4+     return true;
5+   }}
6   onKeyDown={this.onKeyDown.bind(this)}
7   onKeyUp={this.onKeyUp.bind(this)}
8 />

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

9

Token-Permissions

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

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

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 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:89: update your workflow using https://app.stepsecurity.io/secureworkflow/jaywcjlove/react-hotkeys/ci.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:21
Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 8 third-party GitHubAction dependencies pinned
Info: 0 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

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

SAST

Determines if the project uses static code analysis.

Score

4.7

/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 react-hot-keys

@seesaw/react-hot-keys

2.4.6

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

react-hotkeys

2.0.0

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

webpack-hot-middleware

2.26.1

Webpack hot reloading you can attach to your own server

react-hot-loader

4.13.1

Tweak React components in real time.

react-hot-keys

Installations

Pull Requests

3

76

35

38

Issues

15

32

17

Releases

Developer

Developer Guide

CommonJS

Yes

18.19.0

10.2.3

Statistics

Bundle Size

9.57 kB

4.00 kB

Languages

Total Downloads

3,533,440

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-hotkeys

Example

Install

Demo

API

keyName

onKeyDown

onKeyUp

allowRepeat

disabled

filter

Contributors

License

10

10

10

10

9

0

0

0

0

0

0

0

0

4.7

/10

Other packages similar to react-hot-keys