A small React Hook that brings the chat input behavior you’d expect:

1. Enter to submit. Shift + Enter to insert a line break.
2. Cmd/Ctrl + Enter to submit. Enter to insert a line break (preferred for Japanese input 🇯🇵).

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

Demo

• Switch between submit/line-break keys based on user preference
• Works smoothly with IME languages (e.g., Japanese, Chinese)
• Zero dependencies
• Supports React 19+
• Just 1.5 KB gzipped 🚀

pnpm add use-chat-submit
# or
npm i use-chat-submit
# or
yarn add use-chat-submit

import * as React from "react";
import { useChatSubmit } from "use-chat-submit";

export function ChatBox() {
  const [text, setText] = React.useState("");

  const { getTextareaProps } =
    useChatSubmit({
      onSubmit: (value) => {
        console.log("submit:", value);
        setText(""); // clear input after submit
      },
      mode: "mod-enter", // switch behavior based on user preference
    });

  return (
    <textarea
      {...getTextareaProps({
        value: text,
        onChange: (e) => setText(e.target.value),
      })}
    />
  );
}

getTextareaProps() only attaches onKeyDown and ref, so you can freely pass any other props yourself.

// Equivalent behavior
<textarea
  {...getTextareaProps()}
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

• Never submits while an IME is composing (two-step check with KeyboardEvent.isComposing on keydown/keyup).
• <textarea> does not submit forms implicitly on Enter, so you don’t need to block default form behavior.
• For languages that rely heavily on IME (like Chinese or Japanese), using mod-enter is recommended.

• Safely composes with your handlers (user → library). Respects event.defaultPrevented and event.isPropagationStopped().
• Smooths out differences between Safari and Chrome in IME composition handling. Detects reliably using native keydown/keyup events.
• Normalizes Cmd vs. Ctrl with modKey: "auto". Also exposes platform-aware shortcut hints for your UI.

• Handler composition is “user → library”. If the user calls preventDefault(), internal logic does not run.
• Leave line breaks to the browser’s default behavior (no manual "\n" insertion).
• In enter mode, preventDefault() repurposes Enter for submit (Shift+Enter still inserts a line break).
• Does not submit when disabled, readOnly, or when the value is empty with allowEmptySubmit=false and value.trim()==="".

• Only <textarea> is supported (<input> doesn’t allow multi-line input)
• React 19+ (peer dependency)

MIT