useForm

This hook is used by the <Form> component internally and can also be used to create custom form components. This can be helpful in cases where the built-in component does not suit your needs, like when you need access to the underlying <form> ref.

Client / Server

Usage

import { useForm, FormChildrenProps } from '@microeinhundert/radonis'
import { ReactNode } from 'react'


function CustomForm<TData, TError>({ 
  children
}: { 
  children?: ((props: FormChildrenProps<TData, TError>) => ReactNode) | ReactNode
}) {
  const form = useForm<TData, TError>({
    action$: 'YourController.store',
    method: 'post',
    params: { someParam: 'hello' },
    queryParams: { someQueryParam: 'world' },
    // Accepts the same options as the `Form` component
  })


  // Access the ref
  console.log(form.ref)


  return (
    <form {...form.getFormProps()}>
      {typeof children === 'function'
        ? children({
            data: form.data ?? null,
            error: form.error ?? null,
            status: form.status,
          })
        : children}
    </form>
  )
}