useFormState

In this example, we use the useFormState hook from React Hook Form to access the state of the form in our custom components without having to use render props. This makes it easier to have certain functionality in custom components across all forms.

const schema = z.object({ age: z.number().min(1) })

const Button = ({ children, ...props }: JSX.IntrinsicElements['button']) => {
  const { isDirty } = useFormState()
  return (
    <SubmitButton {...props} disabled={!isDirty}>
      {children}
    </SubmitButton>
  )
}

export default () => (
    <Form schema={schema} buttonComponent={Button} />
  )
}

useFormState

In this example, we use the useFormState hook from React Hook Form to access the state of the form in our custom components without having to use render props. This makes it easier to have certain functionality in custom components across all forms.

const schema = z.object({ age: z.number().min(1) })

const Button = ({ children, ...props }: JSX.IntrinsicElements['button']) => {
  const { isDirty } = useFormState()
  return (
    <SubmitButton {...props} disabled={!isDirty}>
      {children}
    </SubmitButton>
  )
}

export default () => (
    <Form schema={schema} buttonComponent={Button} />
  )
}