useEnterSubmit

Submit a form when Enter is pressed in a textarea, keeping Shift + Enter for new lines.

useEnterSubmit returns a form ref and a keydown handler for a textarea. Enter submits the form; Shift + Enter inserts a new line.

Import#

typescript

import { useEnterSubmit } from "@reactberry/system";

Usage#

typescript

"use client";

import { useEnterSubmit } from "@reactberry/system";
import { Box, Button } from "@reactberry/system/elements";

export default function ChatInput({ onSubmit }: { onSubmit: (event: React.FormEvent<HTMLFormElement>) => void }) {
  const { formRef, onKeyDown } = useEnterSubmit();

  return (
    <form ref={formRef} onSubmit={onSubmit}>
      <Box display="flex" gap="s">
        <textarea name="message" onKeyDown={onKeyDown} />
        <Button type="submit">Send</Button>
      </Box>
    </form>
  );
}

Examples#

Form validation#

Submission goes through the browser's validation, so a required or minLength field blocks Enter until it is valid.

API#

typescript

function useEnterSubmit(): {
  formRef: RefObject<HTMLFormElement | null>;
  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
}

Parameters#

None.

Returns#

Prop	Type	Default	Description
`formRef`	`RefObject<HTMLFormElement \| null>`	—	Attach to the `<form>`.
`onKeyDown`	`(event: React.KeyboardEvent<HTMLTextAreaElement>) => void`	—	Attach to the `<textarea>`.

Keyboard#

Key	Action
`Enter`	Submits the form and prevents the new line.
`Shift + Enter`	Inserts a new line (browser default).

Notes#

Enter while an IME composition is in progress (for example Japanese or Chinese input) is ignored, so confirming a character does not submit.
Submission uses form.requestSubmit(), which runs validation and fires the form's submit event.
Enter's default (a new line) is prevented even when formRef is not attached.