Wrap forms with RHF's FormProvider

apps/web/app/routes/examples.tsx

@@ -91,6 +91,9 @@ export default function Component() {
           <SidebarLayout.NavLink to={'/examples/forms/use-fetcher'}>
             useFetcher
           </SidebarLayout.NavLink>
+          <SidebarLayout.NavLink to={'/examples/forms/use-form-state'}>
+            useFormState
+          </SidebarLayout.NavLink>
           <SidebarLayout.NavLink to={'/examples/forms/multiple-forms'}>
             Multiple forms
           </SidebarLayout.NavLink>

apps/web/app/routes/examples/forms/use-form-state.tsx

@@ -0,0 +1,62 @@
+import hljs from 'highlight.js/lib/common'
+import type {
+  ActionFunction,
+  LoaderFunction,
+  MetaFunction,
+} from '@remix-run/node'
+import { formAction } from '~/formAction'
+import { z } from 'zod'
+import Form from '~/ui/form'
+import { metaTags } from '~/helpers'
+import { makeDomainFunction } from 'domain-functions'
+import Example from '~/ui/example'
+import { useFormState } from 'react-hook-form'
+import SubmitButton from '~/ui/submit-button'
+
+const title = 'useFormState'
+const description = `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.`
+
+export const meta: MetaFunction = () => metaTags({ title, description })
+
+const code = `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} />
+  )
+}`
+
+const schema = z.object({ age: z.number().min(1) })
+
+export const loader: LoaderFunction = () => ({
+  code: hljs.highlight(code, { language: 'ts' }).value,
+})
+
+const mutation = makeDomainFunction(schema)(async (values) => values)
+
+export const action: ActionFunction = async ({ request }) =>
+  formAction({ request, schema, mutation })
+
+const Button = ({ children, ...props }: JSX.IntrinsicElements['button']) => {
+  const { isDirty } = useFormState()
+  return (
+    <SubmitButton {...props} disabled={!isDirty}>
+      {children}
+    </SubmitButton>
+  )
+}
+
+export default () => (
+  <Example title={title} description={description}>
+    <Form schema={schema} buttonComponent={Button} />
+  </Example>
+)

packages/remix-forms/src/createForm.tsx

@@ -14,7 +14,7 @@ import type {
   ValidationMode,
   DeepPartial,
 } from 'react-hook-form'
-import { useForm } from 'react-hook-form'
+import { useForm, FormProvider } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import type { FormErrors, FormValues } from './mutations'
 import type {
@@ -432,10 +432,12 @@ function createForm({
     }, [transition.state])
 
     return (
-      <Component method={method} onSubmit={onSubmit} {...props}>
-        {beforeChildren}
-        {customChildren ?? defaultChildren()}
-      </Component>
+      <FormProvider {...form}>
+        <Component method={method} onSubmit={onSubmit} {...props}>
+          {beforeChildren}
+          {customChildren ?? defaultChildren()}
+        </Component>
+      </FormProvider>
     )
   }
 }