Type Alias FetcherWithComponents<TData>

Type declaration

• Form: React.ForwardRefExoticComponent<
      FetcherFormProps & React.RefAttributes<HTMLFormElement>,
  >

  Just like Form except it doesn't cause a navigation.

  function SomeComponent() {
    const fetcher = useFetcher()
    return (
      <fetcher.Form method="post" action="/some/route">
        <input type="text" />
      </fetcher.Form>
    )
  }
  Copy

• load: (href: string, opts?: { flushSync?: boolean }) => Promise<void>

  Loads data from a route. Useful for loading data imperatively inside user events outside a normal button or form, like a combobox or search input.

  let fetcher = useFetcher()
  
  <input onChange={e => {
    fetcher.load(`/search?q=${e.target.value}`)
  }} />
  Copy

• reset: (opts?: { reason?: unknown }) => void

  Reset a fetcher back to an empty/idle state.

  If the fetcher is currently in-flight, the AbortController will be aborted with the reason, if provided.

• submit: FetcherSubmitFunction

  Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.

  The formData can be multiple types:

  • FormData A FormData instance.
  • HTMLFormElement A <form> DOM element.
  • Object An object of key/value-pairs that will be converted to a FormData instance by default. You can pass a more complex object and serialize it as JSON by specifying encType: "application/json". See useSubmit for more details.

  If the method is GET, then the route loader is being called and with the formData serialized to the url as URLSearchParams. If DELETE, PATCH, POST, or PUT, then the route action is being called with formData as the body.

  // Submit a FormData instance (GET request)
  const formData = new FormData();
  fetcher.submit(formData);
  
  // Submit the HTML form element
  fetcher.submit(event.currentTarget.form, {
    method: "POST",
  });
  
  // Submit key/value JSON as a FormData instance
  fetcher.submit(
    { serialized: "values" },
    { method: "POST" }
  );
  
  // Submit raw JSON
  fetcher.submit(
    {
      deeply: {
        nested: {
          json: "values",
        },
      },
    },
    {
      method: "POST",
      encType: "application/json",
    }
  );
  Copy