Progressively Enhanced Form with HTTP verbs

FormWithMethod.tsx

// Progressively enhanced form with HTTP verbs
const FormWithMethod = forwardRef<HTMLFormElement, FormProps>(
  ({ method, children, ...props }, ref) => {
    const cleanMethod =
      typeof method === "string" ? method.toUpperCase() : "POST";
    return (
      <Form
        ref={ref}
        // @ts-expect-error we'll get there
        method={cleanMethod}
        {...props}
      >
        <input type="hidden" name="_method" value={cleanMethod} />
        {children}
      </Form>
    );
  }
);

getRequestFormData.ts

// Use in action functions
async function getRequestFormData(request: Request) {
  const formData = await request.formData();
  const method = formData.get("_method");
  formData.delete("_method");
  const entries = Object.fromEntries(formData.entries());
  return { ...entries, method };
}

Not a recommendation that anyone do this, but if I wanted to use HTTP verbs with forms instead of just GET/POST, I think I would do it this way