@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