KeyBinding

The react-keybinding-component library is exposed through useLibraries(). It allows you to easily listen for and handle keyboard shortcuts inside your modular components.

---

Importing

const { KeyBinding } = useLibraries();

---

Usage

The Keybinding component listens for specific key combinations and triggers a callback when matched.

Example: Simple Keybinding

module.exports = ({ useState, useLibraries }) => {

  const { KeyBinding } = useLibraries();
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Press <strong>Ctrl + K</strong> to increment: {count}</p>

      <Keybinding
        onKeys={['ctrl+k']}
        onKey={() => setCount(count + 1)}
      />
    </div>
  );
};

---

Example: Multiple Shortcuts

module.exports = ({ useState, useLibraries }) => {

  const { KeyBinding } = useLibraries();
  const [message, setMessage] = useState('No key pressed');

  return (
    <div>
      <p>{message}</p>

      <Keybinding onKeys={['ctrl+s']} onKey={() => setMessage('Saved!')} />
      <Keybinding onKeys={['ctrl+shift+d']} onKey={() => setMessage('Duplicated!')} />
    </div>
  );
};

---

Props

Prop	Type	Description
onKeys	string[]	Array of key combinations to listen for (e.g., ['ctrl+s'], ['shift+a']).
onKey	function	Callback triggered when the key combination is pressed.
preventDefault	boolean	Prevents the browser’s default action for the shortcut (optional).

---

References

• NPM: npmjs.com/package/react-keybinding-component

• GitHub: github.com/glortho/react-keybinding-component