forms/create-form-context

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createFormContext returns tuple with 3 items

The createFormContext function returns a tuple containing three items: FormProvider (a component that sets the form context), useFormContext hook (returns the form object that was previously set in FormProvider), and useForm hook (works the same way as useForm exported from the package but has a predefined type).

createFormContext requires FormValues type definition

When using createFormContext, a TypeScript interface defining the form values is required. This interface is passed as a generic type parameter to createFormContext to ensure type safety across the FormProvider, useFormContext, and useForm returned from the function.

createFormContext usage example

import { TextInput } from '@mantine/core'; import { createFormContext } from '@mantine/form'; interface FormValues { age: number; name: string; } const [FormProvider, useFormContext, useForm] = createFormContext<FormValues>(); function ContextField() { const form = useFormContext(); return ( <TextInput label="Your name" key={form.key('name')} {...form.getInputProps('name')} /> ); } export function Context() { const form = useForm({ mode: 'uncontrolled', initialValues: { age: 0, name: '', }, }); return ( <FormProvider form={form}> <form onSubmit={form.onSubmit(() => {})}> <ContextField /> </form> </FormProvider> ); } This example shows how to create form context, define a field component that uses useFormContext, and wrap the form with FormProvider.

Store form context in separate file to avoid dependency cycles

It is recommended to store the form context created by createFormContext in a separate file. This prevents dependency cycles and allows the context variables to be imported from anywhere in the application.

Form context separation pattern example

// form-context.ts file import { createFormContext } from '@mantine/form'; interface UserFormValues { age: number; name: string; } export const [UserFormProvider, useUserFormContext, useUserForm] = createFormContext<UserFormValues>(); Then in other files: // NameInput.tsx import { TextInput } from '@mantine/core'; import { useUserFormContext } from './form-context'; export function NameInput() { const form = useUserFormContext(); return ( <TextInput label="Name" key={form.key('name')} {...form.getInputProps('name')} /> ); } // UserForm.tsx import { NumberInput } from '@mantine/core'; import { UserFormProvider, useUserForm } from './form-context'; import { NameInput } from './NameInput'; function UserForm() { const form = useUserForm({ mode: 'uncontrolled', initialValues: { age: 0, name: '', }, }); return ( <UserFormProvider form={form}> <form onSubmit={form.onSubmit(() => {})}> <NumberInput label="Age" key={form.key('age')} {...form.getInputProps('age')} /> <NameInput /> </form> </UserFormProvider> ); } This pattern allows form context to be created once and reused across multiple components without circular dependencies.

Give your agent this brain