@vimee/react

vimee の React バインディング。シームレスな統合のための useVim フックを提供します。

インストール

npm install @vimee/core @vimee/react

useVim

React コンポーネントに vimee を統合するための主要フック：

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>
  );
}

オプション

オプション	型	デフォルト	説明
`content`	`string`	（必須）	初期エディターコンテンツ
`cursorPosition`	`string`	`"1:1"`	初期カーソル位置（1ベース、`"line:col"`）
`readOnly`	`boolean`	`false`	編集を無効にする
`onChange`	`(content: string) => void`	—	コンテンツ変更時に呼ばれる
`onYank`	`(text: string) => void`	—	ヤンク時に呼ばれる
`onSave`	`(content: string) => void`	—	`:w` 時に呼ばれる
`onModeChange`	`(mode: VimMode) => void`	—	モード変更時に呼ばれる
`onAction`	`(action: VimAction, key: string) => void`	—	すべてのアクションで呼ばれる
`indentStyle`	`"space" \| "tab"`	`"space"`	インデント文字
`indentWidth`	`number`	`2`	インデント幅
`keybinds`	`KeybindEntry[]`	—	カスタムキーバインド
`commands`	`CommandEntry[]`	—	カスタム ex コマンド

戻り値

フィールド	型	説明
`content`	`string`	現在のバッファコンテンツ
`cursor`	`CursorPosition`	現在のカーソル位置（0ベース）
`mode`	`VimMode`	現在の Vim モード
`statusMessage`	`string`	ステータスバーメッセージ
`statusError`	`boolean`	ステータスがエラーかどうか
`visualAnchor`	`CursorPosition \| null`	ビジュアルモードのアンカー
`commandLine`	`string`	入力中の Ex コマンド
`handleKeyDown`	`(e: React.KeyboardEvent) => void`	`onKeyDown` にアタッチ
`handleScroll`	`(direction, visibleLines, amount?) => void`	スクロールハンドラー
`updateViewport`	`(topLine, height) => void`	ビューポート同期