{"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.","language":"javascript","status":"active","last_verified":"Fri May 01","install":{"commands":["npm install react-keydown"],"cli":null},"imports":["import keydown from 'react-keydown'","import { Keys } from 'react-keydown'","import { keydownScoped } from 'react-keydown'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}