Signature

function useSubmit(): (
  value: Submission,
  options?: SubmissionOptions,
) => Promise<void> | Promise<import("@smolter/core").Result<unknown>>;

Parameters

The hook takes no arguments and requires RouterProvider. Its returned function accepts a Submission and SubmissionOptions. Use a registered route URL in options.action; the default is the current snapshot URL.

Returns

For GET, returns the navigation promise. For POST, PUT, PATCH, or DELETE, returns the router submission promise with a Result. Methods are normalized to uppercase and default to POST. Page action results are read through useActionData; independent forms should generally use useFetcher instead.

Example

An imperative GET replaces the destination query string with the submitted fields and navigates to that route’s loader.

import { useSubmit } from "@kasperrt/smolter/preact";

export function SearchShortcut() {
  const submit = useSubmit();

  return (
    <button onClick={() => void submit({ q: "routing" }, {
      action: "/search",
      method: "GET",
      replace: true,
    })}>
      Search routing
    </button>
  );
}

Body encoding and navigation options

FormData is preserved, an HTMLFormElement becomes FormData, and object fields are stringified. application/json encoding stores JSON in a _payload form field for readSubmission. Pass action and method explicitly when submitting a form element: its HTML action, method, and clicked submit button are not inspected here. replace and preventScrollReset are forwarded for GET navigation; they are not forwarded by this hook for mutations.