useSubmit
The imperative version of <Form>
that lets you, the programmer, submit a form instead of the user.
import { useSubmit } from "@remix-run/react";
function SomeComponent() {
const submit = useSubmit();
return (
<Form
onChange={(event) => {
submit(event.currentTarget);
}}
/>
);
}
submit(targetOrData, options);
targetOrData
Can be any of the following:
HTMLFormElement
instance
<Form
onSubmit={(event) => {
submit(event.currentTarget);
}}
/>
FormData
instance
const formData = new FormData();
formData.append("myKey", "myValue");
submit(formData, { method: "post" });
Plain object that will be serialized as FormData
submit({ myKey: "myValue" }, { method: "post" });
Plain object that will be serialized as JSON
submit(
{ myKey: "myValue" },
{ method: "post", encType: "application/json" }
);
options
Options for the submission, the same as <Form>
props. All options are optional.
application/x-www-form-urlencoded
, multipart/form-data
, application/json
, or text/plain
. Default is application/x-www-form-urlencoded
.false
to submit using a fetcher instead of performing a navigationnavigate: false
false
.false
."route"
(relative to the route hierarchy) or "path"
(relative to the URL).ReactDOM.flushSync
call instead of the default React.startTransition
document.startViewTransition()
useViewTransitionState()
submit(data, {
action: "",
method: "post",
encType: "application/x-www-form-urlencoded",
preventScrollReset: false,
replace: false,
relative: "route",
});
useResolvedPath
docs for a note on the behavior of the future.v3_relativeSplatPath
future flag for relative useSubmit()
behavior within splat routes
Discussion
Related API