react-keys-shortcuts

A simple React utility package to easily manage global and component-specific keyboard shortcuts with clean hooks — no need to add window.addEventListener everywhere!

✨ Features

• 🎹 Easily define custom keyboard shortcut formulas like ctrl+a, ctrl+shift+d
• 🔥 Two hooks:
  • useListenEvent — bind shortcut events to existing button clicks or actions
  • useListenEffect — globally listen for shortcut events across your app
• ⚛️ Clean and reusable — no repeated listeners in components
• 🛠️ Fully TypeScript supported
• 📦 Lightweight, no external dependencies

📦 Installation

npm install react-keys-shortcuts  

🚀 Usage

1 useListenEvent

Bind a shortcut formula to an existing click event.

import { useListenEvent } from 'react-keys-shortcuts';

// 'use user formula here for exaple used "ctrl+shift+x"

const MyComponent = () => {
  const activeIdRef = useRef<string>('');
  const clickFunction = (id: string) => {
    console.log('Clicked item', id);
  };

//   Listen for "ctrl+keys" and trigger clickFunction   
  useListenEvent('ctrl+shift+x', () => {
    clickFunction(activeIdRef.current);
  });

  return (
    <button onClick={() => {
        activeIdRef.current = 'id-123'; // assign value to ref
        clickFunction(activeIdRef.current); // call with updated value
    }}>
        Click Me or click ctrl+shift+x
    </button>
  );
};

2 useListenEffect

Globally listen to keyboard shortcuts and trigger actions.

import { useListenEffect } from 'react-keys-shortcuts';

const App = () => {
  useListenEffect('ctrl+shift+l', () => {
    alert('Shortcut triggered!');
  });

  return <div>Press ctrl+shift+l</div>;
};

👥 Contributing

We welcome contributions! Follow these steps:

1 Clone the repo

git clone https://github.com/yourusername/react-keys-shortcuts.git
cd react-keys-shortcuts

2 Create a new branch

git checkout -b your-feature-branch

3 Pull latest changes

git pull origin main

4 Make your changes

5 Commit and push your changes and raise pull request

📜 License

This project is licensed under the MIT License.

📬 Connect

Built with 🤍 by Blessed raj P