「useChatSubmit」を入れたら、変換確定のEnterで誤送信しなくなった | useChatSubmit

どんなアプリか

React で作るチャットの入力欄に、送信と改行のキー操作を用意する小さなフックです。モードは2つあります。Enter で送信し Shift+Enter で改行するモードと、Cmd/Ctrl+Enter で送信し Enter で改行するモードです。README では、日本語入力には後者を勧めています。

It prevents accidental submissions while using an IME, works seamlessly with your own handlers, and normalizes Cmd vs. Ctrl differences across platforms.

catnose さん、GitHub の README

日本語入力（IME）で変換している間は送信しません。keydown と keyup の両方で KeyboardEvent.isComposing を確かめる2段階の判定で、変換の扱いについての Safari と Chrome の違いもならしています。

Cmd と Ctrl のどちらを使うかは、modKey を “auto” にしておくと、macOS では Cmd、それ以外では Ctrl になります。画面に出すショートカットの案内文も、端末に合わせた形で受け取れます。

ほかのライブラリに依存せず、gzip で圧縮すると 1.7 KB です。getTextareaProps() が textarea に付けるのは onKeyDown と ref の2つで、ほかの props は自由に渡せます。動く様子は作り手のサイトのデモで確かめられます。

同じ分野のアプリ

名前	型	仕掛け	対応	料金
useChatSubmit	React フック	チャット入力欄の送信キーを切り替え、IME 変換中の誤送信を防ぐ	npm ライブラリ（React 19 以降）	無料（OSS, MIT）
@nkzw/stack	React コンポーネント	flexbox のプロパティを名前付き props で直接書ける Stack コンポーネント	npm ライブラリ（React・React Native）	無料（OSS, MIT）
just-styled	CSS-in-JS	React 19 向けの、ビルド工程なしで使える CSS-in-JS	React 19 ライブラリ	無料（OSS, Apache-2.0）
Prompt Line	入力補助アプリ	フローティング入力欄で日本語を書き、ターミナルの AI ツールに貼り付ける	Mac（Electron）	無料（OSS, MIT）

入れる前に

対応しているのは textarea 要素で、input 要素には対応していません。React 19 以降が必要です（peer dependency）。

初期設定（allowEmptySubmit が false）では、空の入力は送信しません。disabled や readOnly のときも送信しません。enabled を “non-mobile” にすると、モバイルの端末では動かさず、それ以外の端末で動かす設定にできます。