S

useFormSubmit

Manages the full submit lifecycle — plugin hooks, modular actions, error handling, redirect, and messages.

useFormSubmit

Handles everything that happens when the user clicks “Submit”: plugin transforms, onBeforeSubmit hooks, modular submit actions, onAfterSubmit, error handling, redirect, and success/error messages.

You probably don’t need this directly. useFormState calls it internally. Use it only when building a custom submit flow outside the standard <Form /> component.

Signature

import { useFormSubmit } from '@saastro/forms';

const {
  loading,
  submitted,
  error,
  submitActionsResult,
  handleSubmit,
  resetError,
  getSuccessMessage,
  getErrorMessage,
} = useFormSubmit({ methods, config });

Parameters

ParameterTypeDescription
methodsUseFormReturnReact Hook Form instance
configFormConfigFull form configuration (includes submit actions, plugins, messages)

Return Value

PropertyTypeDescription
loadingbooleantrue while submission is in progress
submittedbooleantrue after successful submission
errorError | nullLast submission error
submitActionsResultSubmitActionsResult | nullResults from modular submit actions
handleSubmit(data) => Promise<void>The submit handler
resetError() => voidClear the error state
getSuccessMessage() => stringResolve success message (static or dynamic)
getErrorMessage() => stringResolve error message (static or dynamic)

Submit Flow

When handleSubmit(data) is called:

  1. Sets loading = true, clears previous error
  2. Plugin transform: pluginManager.transformValues(data) produces processedValues
  3. Plugin hook: onBeforeSubmit(processedValues) — if it throws, submission is cancelled
  4. Submit actions: Resolves onSubmit-triggered actions and runs them via executeSubmitActions(). Throws if any action fails
  5. Legacy fallback: If no submit actions exist, falls back to config.submit.onSubmit() or defaultSubmit()
  6. Plugin hook: onAfterSubmit(processedValues, response)
  7. Sets submitted = true, fires config.onSuccess(processedValues)
  8. Redirect: If config.redirect is set (string or function), navigates via window.location.href
  9. Error path: Normalizes error, fires onError plugin hook and config.onError, shows toast
  10. Sets loading = false

Messages

getSuccessMessage() and getErrorMessage() resolve the configured messages:

// Static
.successMessage('Thanks for submitting!')

// Dynamic — receives form values
.successMessage((values) => `Thanks ${values.name}!`)

// Dynamic error — receives error + values
.errorMessage((error, values) => `Failed for ${values.email}: ${error.message}`)

Defaults: 'Gracias!' for success, 'Ha ocurrido un error al enviar el formulario.' for error.