{"id":26159,"library":"react-keydown","title":"react-keydown","description":"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.","status":"active","version":"1.9.12","language":"javascript","source_language":"en","source_url":"https://github.com/glortho/react-keydown","tags":["javascript","react","react-component","decorator","higher-order-component","keypress","keydown","keyboard","keynav"],"install":[{"cmd":"npm install react-keydown","lang":"bash","label":"npm"},{"cmd":"yarn add react-keydown","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-keydown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React >= 0.14.0","package":"react","optional":false},{"reason":"peer dependency for React DOM >= 0.14.0","package":"react-dom","optional":false}],"imports":[{"note":"The default export is a function that can be used as a decorator or HOC.","wrong":"const keydown = require('react-keydown')","symbol":"default","correct":"import keydown from 'react-keydown'"},{"note":"Keys is a named export for key code constants like ENTER, TAB, etc.","wrong":"import Keys from 'react-keydown'","symbol":"Keys","correct":"import { Keys } from 'react-keydown'"},{"note":"A decorator for methods within a class-decorated component; not commonly used.","wrong":null,"symbol":"keydownScoped","correct":"import { keydownScoped } from 'react-keydown'"}],"quickstart":{"code":"import React from 'react';\nimport keydown, { Keys } from 'react-keydown';\n\nclass MyComponent extends React.Component {\n  state = { count: 0 };\n\n  @keydown('enter')\n  increment() {\n    this.setState(prev => ({ count: prev.count + 1 }));\n  }\n\n  render() {\n    return (\n      <div>\n        <p>Press Enter to increment: {this.state.count}</p>\n      </div>\n    );\n  }\n}\n\nexport default MyComponent;","lang":"javascript","description":"Demonstrates decorating a method with @keydown('enter') to increment a counter when Enter is pressed."},"warnings":[{"fix":"Consider using react-hotkeys or react-use-gesture as alternatives.","message":"react-keydown may not be actively maintained; check for future updates.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Install and configure the decorator plugin, or use the HOC pattern: keydown('enter')(MyComponent).","message":"Decorator syntax requires Babel with decorator transform plugin (e.g., @babel/plugin-proposal-decorators).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure components are properly focused or clicked to receive events; consider using event.stopPropagation if needed.","message":"Only one keydown listener attached to document; scoping relies on component focus/active state, which may not work in all UI scenarios.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save react-keydown'","cause":"Package not installed or missing from dependencies.","error":"Module not found: Can't resolve 'react-keydown'"},{"fix":"Install @babel/plugin-proposal-decorators and add to .babelrc: { 'plugins': ['@babel/plugin-proposal-decorators', { 'legacy': true }] }","cause":"Decorator plugin not enabled or Babel misconfigured.","error":"The decorator is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}