Skip to content

A lightweight React component to manage keyboard shortcuts effortlessly. Perfect for apps that need customizable hotkeys.

License

Notifications You must be signed in to change notification settings

sulaymon1404/react-hotkeys-manager

🚀 react-hotkeys-manager

npm version npm downloads License: MIT

A lightweight React component to manage keyboard shortcuts effortlessly. Perfect for apps that need customizable hotkeys.

🔥 Features

  • Declarative hotkey configuration
  • Supports Ctrl, Shift, Alt, and Meta modifiers
  • Zero dependencies
  • TypeScript support

📦 Installation

npm install react-hotkeys-manager

🛠️ Usage

Using the Component

import { HotkeyManager } from 'react-hotkeys-manager';

const App = () => {
  const hotkeys = [
    {
      keys: ['ctrl','s'],
      action: () => alert('Saved!'),
    },
  ];

  return <HotkeyManager hotkeys={hotkeys} />;
};

Using the Hook

import { useHotkeys } from 'react-hotkeys-manager';

const App = () => {
  const hotkeys = [
    {
      keys: ['ctrl', 's'],
      action: () => alert('Saved!'),
    },
  ];

  useHotkeys(hotkeys);

  return (
    <div>
      <h1>Press Ctrl+S to see the alert</h1>
    </div>
  );
};

📖 API Reference

Prop Type Description
hotkeys Hotkey[] Array of hotkey configurations.

🤝 Contributing

Pull requests are welcome! See CONTRIBUTING.md for guidelines.

📜 Code of Conduct

This project follows the Contributor Covenant.

📜 License

MIT © Sulaymon Makhsumov

About

A lightweight React component to manage keyboard shortcuts effortlessly. Perfect for apps that need customizable hotkeys.

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published