Store form ref on context and add useSubmit hook

lib/context.tsx

@@ -22,6 +22,7 @@ export type FormContext<S extends AnyObjectSchema> = FieldsContext & {
   validate(): ValidationResult<InferType<S>>;
   onSubmit: FormEventHandler<HTMLFormElement>;
   setErrors(errors: ValidationError[]): void;
+  formRef: React.RefObject<HTMLFormElement>;
 };
 
 export const FormContext = createContext<FormContext<any> | undefined>(

lib/create-form-context.tsx → lib/create-form-context.ts

@@ -15,6 +15,7 @@ type CreateFormContextOptions<S extends AnyObjectSchema> = {
   schema: ReadonlySignal<S | undefined>;
   id: string;
   onSubmit?: FormEventHandler<HTMLFormElement>;
+  formRef: React.RefObject<HTMLFormElement>;
 };
 
 export function createFormContext<S extends AnyObjectSchema>({
@@ -25,6 +26,7 @@ export function createFormContext<S extends AnyObjectSchema>({
   schema,
   id,
   onSubmit,
+  formRef,
 }: CreateFormContextOptions<S>): FormContext<S> {
   let result = signal(undefined);
   let data = outerData || signal(submittedData || defaultData || {});
@@ -61,6 +63,7 @@ export function createFormContext<S extends AnyObjectSchema>({
     touched,
     didSubmit,
     formId: id,
+    formRef,
     validate,
     onSubmit(event) {
       onSubmit?.(event);

lib/form.tsx

@@ -6,6 +6,7 @@ import { FieldsContext, FormContext } from "~/context";
 import { type ValidationError } from "~/utils/validate";
 import { createFormContext } from "./create-form-context";
 import type { DeepPartial } from "./utils/deep-partial";
+import { useForwardedRef } from "~/utils/use-forwarded-ref";
 
 export type FormProps<S extends AnyObjectSchema> = {
   children?: ReactNode;
@@ -29,10 +30,11 @@ export const Form = forwardRef(
       submittedErrors,
       ...props
     }: FormProps<S>,
-    ref: ForwardedRef<HTMLFormElement>
+    forwardedRef: ForwardedRef<HTMLFormElement>
   ): JSX.Element => {
     let formId = useId();
     let schemaSignal = useSignal(schema);
+    let formRef = useForwardedRef(forwardedRef);
 
     let formContext: FormContext<S> = useMemo(() => {
       return createFormContext<S>({
@@ -43,6 +45,7 @@ export const Form = forwardRef(
         schema: schemaSignal,
         id: id || formId,
         onSubmit,
+        formRef,
       });
     }, []);
 
@@ -56,7 +59,7 @@ export const Form = forwardRef(
         id={id || formId}
         {...props}
         onSubmit={formContext.onSubmit}
-        ref={ref}
+        ref={formRef}
       >
         <FormContext.Provider value={formContext}>
           <FieldsContext.Provider value={formContext}>

lib/remix.tsx

@@ -2,6 +2,7 @@ import {
   Form as RemixForm,
   useActionData,
   useNavigation,
+  useSubmit as useRemixSubmit,
 } from "@remix-run/react";
 import type { FormProps as RemixFormProps } from "@remix-run/react";
 import type { ForwardedRef, ReactNode } from "react";
@@ -13,6 +14,7 @@ import type { ErrorActionData, ValidationErrorResult } from "~/utils/validate";
 import { createFormContext } from "./create-form-context";
 import type { DeepPartial } from "./utils/deep-partial";
 import { json } from "@remix-run/node";
+import { useForwardedRef } from "~/utils/use-forwarded-ref";
 
 export * from "./index";
 
@@ -34,7 +36,7 @@ export const Form = forwardRef(
       onSubmit,
       ...props
     }: FormProps<S>,
-    ref: ForwardedRef<HTMLFormElement>
+    forwardedRef: ForwardedRef<HTMLFormElement>
   ): JSX.Element => {
     let actionData = useActionData<ErrorActionData | undefined>();
     let formId = useId();
@@ -46,6 +48,8 @@ export const Form = forwardRef(
       }
     }, [actionData?.errors]);
 
+    let formRef = useForwardedRef(forwardedRef);
+
     let formContext: FormContext<S> = useMemo(() => {
       return createFormContext<S>({
         submittedErrors: actionData?.errors,
@@ -55,6 +59,7 @@ export const Form = forwardRef(
         schema: schemaSignal,
         id: id || formId,
         onSubmit,
+        formRef,
       });
     }, []);
 
@@ -68,7 +73,7 @@ export const Form = forwardRef(
         id={id || formId}
         {...props}
         onSubmit={formContext.onSubmit}
-        ref={ref}
+        ref={formRef}
       >
         <FormContext.Provider value={formContext}>
           <FieldsContext.Provider value={formContext}>
@@ -97,3 +102,10 @@ export function useIsSubmitting() {
     navigation.formData?.get("_formId") === form.formId
   );
 }
+
+export function useSubmit() {
+  let remixSubmit = useRemixSubmit();
+  let context = useFormContext();
+
+  return () => remixSubmit(context.formRef.current);
+}