React Mosyle Shortcuts

Simple library for managing keyboard shortcuts in React.

Installation

npm install react-mosyle-shortcuts

Basic Usage

import { Shortcut } from "react-mosyle-shortcuts";

function App() {
  const handleKey = (event) => {
    console.log(`Key: ${event.key}`);
  };

  return (
    <Shortcut keys={["a", "b", "c"]} onKey={handleKey}>
      <input type="text" />
    </Shortcut>
  );
}

Advanced Options

<Shortcut
  keys={["Enter", "Escape"]}
  onKey={handleKey}
  options={{
    debounce: 300,
    preventDefault: true,
    include: ["input", "textarea"],
    exclude: ["button"],
  }}
>
  <input type="text" />
</Shortcut>

Direct Hook Usage

import { useShortcut } from "react-mosyle-shortcuts";

function MyComponent() {
  const handleKeyDown = useShortcut({
    keys: ["f", "g"],
    onKey: (event) => console.log(event.key),
    options: { debounce: 100 },
  });

  return <div onKeyDown={handleKeyDown}>Content</div>;
}

Options

• debounce: Delay in ms before executing
• preventDefault: Calls preventDefault() on the event
• include: Array of CSS selectors to include
• exclude: Array of CSS selectors to exclude