@vimee/react

React bindings for vimee, providing the useVim hook for seamless integration.

Installation

npm install @vimee/core @vimee/react

useVim

The primary hook for integrating vimee into a React component:

import { useVim } from "@vimee/react";

function Editor() {
  const { content, cursor, mode, handleKeyDown } = useVim({
    content: "Hello, vimee!",
  });

  return (
    <div onKeyDown={handleKeyDown} tabIndex={0}>
      <pre>{content}</pre>
      <div>Mode: {mode} | Cursor: {cursor.line}:{cursor.col}</div>
    </div>
  );
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | content | string | (required) | Initial editor content | | cursorPosition | string | "1:1" | Initial cursor position (1-based, "line:col") | | readOnly | boolean | false | Disable editing | | onChange | (content: string) => void | — | Called when content changes | | onYank | (text: string) => void | — | Called on yank | | onSave | (content: string) => void | — | Called on :w | | onModeChange | (mode: VimMode) => void | — | Called on mode change | | onAction | (action: VimAction, key: string) => void | — | Called on every action | | indentStyle | "space" \| "tab" | "space" | Indent character | | indentWidth | number | 2 | Indent width | | keybinds | KeybindEntry[] | — | Custom keybindings | | commands | CommandEntry[] | — | Custom ex-commands |

Return Value

| Field | Type | Description | |-------|------|-------------| | content | string | Current buffer content | | cursor | CursorPosition | Current cursor (0-based) | | mode | VimMode | Current Vim mode | | statusMessage | string | Status bar message | | statusError | boolean | Whether status is an error | | visualAnchor | CursorPosition \| null | Visual mode anchor | | commandLine | string | Ex command being typed | | handleKeyDown | (e: React.KeyboardEvent) => void | Attach to onKeyDown | | handleScroll | (direction, visibleLines, amount?) => void | Scroll handler | | updateViewport | (topLine, height) => void | Viewport sync |