Registry / web-framework / react-keydown

react-keydown

library1.9.12jsnpmunverified

A higher-order component and decorator for React that binds keyboard events to components and methods. Current stable version is 1.9.12. It uses a declarative syntax to define key bindings, supports modifier keys, scopes events to active components, and adds only a single document listener regardless of the number of bindings. Released as CommonJS, with a separate UMD branch. Compared to alternatives like react-hotkeys, it is lighter (2KB gzipped) and simpler, with direct method decoration but less flexibility in key combinations and sequencing.

web-framework

npm install react-keydown

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-KEYDOWN

react-keydown

web-frameworkjavascriptv1.9.12

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import keydown from 'react-keydown'

✗ const keydown = require('react-keydown')

The default export is a function that can be used as a decorator or HOC.

Keys

✓ import { Keys } from 'react-keydown'

✗ import Keys from 'react-keydown'

Keys is a named export for key code constants like ENTER, TAB, etc.

keydownScoped

✓ import { keydownScoped } from 'react-keydown'

A decorator for methods within a class-decorated component; not commonly used.

Demonstrates decorating a method with @keydown('enter') to increment a counter when Enter is pressed.

import React from 'react'; import keydown, { Keys } from 'react-keydown'; class MyComponent extends React.Component { state = { count: 0 }; @keydown('enter') increment() { this.setState(prev => ({ count: prev.count + 1 })); } render() { return ( <div> <p>Press Enter to increment: {this.state.count}</p> </div> ); } } export default MyComponent;

Debug

Known issues

deprecatedreact-keydown may not be actively maintained; check for future updates.

fix

Consider using react-hotkeys or react-use-gesture as alternatives.

affects: >=1.0.0

gotchaDecorator syntax requires Babel with decorator transform plugin (e.g., @babel/plugin-proposal-decorators).

fix

Install and configure the decorator plugin, or use the HOC pattern: keydown('enter')(MyComponent).

affects: >=1.0.0

gotchaOnly one keydown listener attached to document; scoping relies on component focus/active state, which may not work in all UI scenarios.

fix

Ensure components are properly focused or clicked to receive events; consider using event.stopPropagation if needed.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-keydown'

Package not installed or missing from dependencies.

fix

Run 'npm install --save react-keydown'

The decorator is not a function

Decorator plugin not enabled or Babel misconfigured.

fix

Install @babel/plugin-proposal-decorators and add to .babelrc: { 'plugins': ['@babel/plugin-proposal-decorators', { 'legacy': true }] }

Upgrade

Version history

1.9.12latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React >= 0.14.0

react-domrequiredpeer dependency for React DOM >= 0.14.0

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/glortho/react-keydown ↗

packagehttps://www.npmjs.com/package/react-keydown ↗