import * as React from "react"
 
import { useOnEnterSubmit } from "@/hooks/use-on-enter-submit"
 
function ContactForm() {
  const formRef = React.useRef<HTMLFormElement>(null)
  const [email, setEmail] = React.useState("")
  const [message, setMessage] = React.useState("")
 
  const handleSubmit = () => {
    console.log("Form submitted:", { email, message })
  }
 
  useOnEnterSubmit(formRef, handleSubmit)
 
  return (
    <form ref={formRef}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        required
      />
      <button type="submit">Submit</button>
    </form>
  )
}

import { useForm } from "react-hook-form"
 
import { useOnEnterSubmit } from "@/hooks/use-on-enter-submit"
 
function MyForm() {
  const formRef = React.useRef<HTMLFormElement>(null)
  const form = useForm()
 
  const onSubmit = (data: any) => {
    console.log("Submitted:", data)
  }
 
  const handleEnterSubmit = () => {
    form.handleSubmit(onSubmit)()
  }
 
  useOnEnterSubmit(formRef, handleEnterSubmit)
 
  return (
    <form ref={formRef} onSubmit={form.handleSubmit(onSubmit)}>
      {/* form fields */}
    </form>
  )
}

function CustomForm() {
  const formRef = React.useRef<HTMLFormElement>(null)
  const [errors, setErrors] = React.useState<Record<string, string>>({})
 
  const validate = () => {
    // Your custom validation logic
    const newErrors: Record<string, string> = {}
    // ... validation
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }
 
  const handleSubmit = () => {
    if (validate()) {
      console.log("Form is valid, submitting...")
    }
  }
 
  useOnEnterSubmit(formRef, handleSubmit, { checkValidity: false })
 
  return <form ref={formRef}>{/* form fields */}</form>
}

function MyForm() {
  const formRef = React.useRef<HTMLFormElement>(null)
 
  const handleSubmit = () => {
    // Custom submission logic
  }
 
  // Allow default form submission behavior
  useOnEnterSubmit(formRef, handleSubmit, { preventDefault: false })
 
  return <form ref={formRef}>{/* form fields */}</form>
}