useFormMetadata
A React hook that returns the form metadata by subscribing to the context set on the FormProvider.
1const form = useFormMetadata(formId);
#Parameters
formId
The id attribute that is set on the form element.
#Returns
form
The form metadata. It is the same object as the one returned by the useForm hook.
#Tips
Better type inference with the FormId
type
You can use the FormId<Schema, FormError>
type instead of string
to improve the type inference of the form metadata.
1import { type FormId, useFormMetadata } from '@conform-to/react';
2
3type ExampleComponentProps = {
4 formId: FormId<Schema, FormError>;
5};
6
7function ExampleComponent({ formId }: ExampleComponentProps) {
8 // Now it recognize the type of `form.errors` and the result of `form.getFieldset()`
9 const form = useFormMetadata(formId);
10
11 return <div>{/* ... */}</div>;
12}
When rendering your component, you will use the form id provided by Conform, such as form.id
or fields.fieldName.formId
which are already typed as FormId<Schema, FormError>
. This allows typescript to check if the type is compatible and warn you if it doesn't. You can still pass a string
, but you will lose the ability for type checking.
1import { useForm } from '@conform-to/react';
2
3function Example() {
4 const [form, fields] = useForm();
5
6 return (
7 <>
8 <ExampleComponent formId={form.id} />
9 <ExampleComponent formId={fields.fieldName.formId} />
10 </>
11 );
12}
However, the more specific you made with the FormId
type, the harder it is to reuse the component. If your component have no use of the Schema
or FormError
generics, you can keep it simple and type it as string
as well.
type ExampleComponentProps = {
// If you don't care about the type of Schema or FormError
formId: string;
// If you are accessing a specific field from the form metadata
formId: FormId<{ fieldName: string }>;
// If you have a custom error type
formId: FormId<Record<string, any>, CustomFormError>;
};