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);  }}  />  ); } 

Signature

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.

• action: The href to submit to. Default is the current route path.
• method: The HTTP method to use like POST, default is GET.
• encType: The encoding type to use for the form submission: application/x-www-form-urlencoded, multipart/form-data, application/json, or text/plain. Default is application/x-www-form-urlencoded.
• navigate: Specify false to submit using a fetcher instead of performing a navigation
• fetcherKey: The fetcher key to use when submitting using a fetcher via navigate: false
• preventScrollReset: Prevents the scroll position from being reset to the top of the window when the data is submitted. Default is false.
• replace: Replaces the current entry in the history stack, instead of pushing the new entry. Default is false.
• relative: Defines relative route resolution behavior. Either "route" (relative to the route hierarchy) or "path" (relative to the URL).
• flushSync: Wraps the initial state update for this navigation in a ReactDOM.flushSync call instead of the default React.startTransition
• viewTransition: Enables a View Transition for this navigation by wrapping the final state update in document.startViewTransition()
  • If you need to apply specific styles for this view transition, you will also need to leverage the useViewTransitionState()

submit(data, {  action: "",  method: "post",  encType: "application/x-www-form-urlencoded",  preventScrollReset: false,  replace: false,  relative: "route", }); 

Please see the Splat Paths section on the useResolvedPath docs for a note on the behavior of the future.v3_relativeSplatPath future flag for relative useSubmit() behavior within splat routes

Additional Resources

Discussion

• Form vs. Fetcher

Related API

• <Form>
• fetcher.submit