react-kord

EN: Lightweight React keyboard shortcut hooks with zero runtime dependencies beyond React.

ES: Libreria ligera de atajos de teclado para React, sin dependencias runtime adicionales a React.

Installation / Instalacion

npm install react-kord

Quick Start / Inicio Rapido

import { useShortcut } from "react-kord";

export function SearchShortcut() {
  useShortcut("ctrl+k", () => {
    console.log("Open command palette / Abrir paleta de comandos");
  });

  return <div>Press Ctrl+K / Presiona Ctrl+K</div>;
}

Multiple Shortcuts / Multiples Atajos

import { useShortcuts } from "react-kord";

export function WorkspaceShortcuts() {
  useShortcuts([
    { keys: "ctrl+k", handler: () => console.log("palette / paleta") },
    { keys: "ctrl+j", handler: () => console.log("panel") },
  ]);

  return <div>Try Ctrl+K and Ctrl+J / Prueba Ctrl+K y Ctrl+J</div>;
}

Provider and Shortcut Map / Provider y Mapa de Atajos

import {
  ShortcutProvider,
  useShortcut,
  useShortcutMap,
} from "react-kord";

function ShortcutHelp() {
  const shortcuts = useShortcutMap();

  useShortcut("?", () => {
    // Toggle help modal / Mostrar u ocultar ayuda
  }, {
    description: "Toggle shortcut help / Mostrar ayuda de atajos",
  });

  return (
    <ul>
      {shortcuts.map((item) => (
        <li key={`${item.keys}-${item.description}`}>
          {item.keys}: {item.description}
        </li>
      ))}
    </ul>
  );
}

export function App() {
  return (
    <ShortcutProvider>
      <ShortcutHelp />
    </ShortcutProvider>
  );
}

API

• useShortcut(keys, handler, options?)
• useShortcuts(entries)
• useShortcutMap()
• ShortcutProvider

Shortcut Format / Formato de Atajos

EN:

• Separator: +
• Modifiers: ctrl, shift, alt, meta
• Meta aliases: cmd, command, win
• Case-insensitive (Ctrl+K equals ctrl+k)

ES:

• Separador: +
• Modificadores: ctrl, shift, alt, meta
• Alias de meta: cmd, command, win
• No distingue mayusculas/minusculas (Ctrl+K equivale a ctrl+k)

Dev Commands / Comandos de Desarrollo

npm run typecheck
npm run test
npm run build