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 of user events outside of 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

  • • (href, opts?): Promise<void>

    • Parameters

      • href: string
      • Optionalopts: {
            flushSync?: boolean;
        }

        • OptionalflushSync?: boolean

          Wraps the initial state update for this fetcher.load in a ReactDOM.flushSync call instead of the default React.startTransition. This allows you to perform synchronous DOM actions immediately after the update is flushed to the DOM.

      Returns Promise<void>

• 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][form_data] - A FormData instance.
  • [HTMLFormElement][html_form_element] - A [<form>][form_element] 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][use-submit] for more details.

  If the method is GET, then the route [loader][loader] is being called and with the formData serialized to the url as [URLSearchParams][url_search_params]. If DELETE, PATCH, POST, or PUT, then the route [action][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