Display form status
A child component needs to show whether its parent form is valid without receiving the entire form object through props.
Conform · Hook
useFormMetadata
useFormMetadata is a React hook that reads a form's metadata from FormProvider context. Supply the matching form ID to access the same metadata object returned by useForm.
How it works
useFormMetadata subscribes to the form context provided by FormProvider and returns the matching form's metadata. Pass the form's ID, preferably a typed FormId supplied by Conform, to obtain the same metadata object exposed by useForm.
Syntax
const form = useFormMetadata(formId);Parameters
| Name | Type | Description |
|---|---|---|
formId | string | FormId<Schema, FormError> | The id attribute set on the form element; use the matching form ID when reading metadata. |
Returns
The form metadata object, identical to the object returned by useForm.
Key points
- The hook obtains form metadata reactively from the FormProvider context.
- Its required input is the form element's ID.
- The result has the same form metadata shape returned by useForm.
- Use FormId with the schema and error types to strengthen metadata type inference.
- Conform-generated form IDs can be passed directly because they already carry the typed FormId information.
Common mistakes
- Passing an arbitrary string works but removes the form-ID type checking that improves metadata inference.
Example: Read form metadata from context
import { FormProvider, useForm, useFormMetadata } from '@conform-to/react';
function FormStatus() {
const form = useFormMetadata('profile');
return <p>{form.valid ? 'Valid' : 'Needs attention'}</p>;
}
export default function ProfileForm() {
const [form, fields] = useForm({ id: 'profile' });
return (
<FormProvider context={form.context}>
<form {...form.props}>
<FormStatus />
<input {...fields.name.props} />
</form>
</FormProvider>
);
}Reads the metadata for the form identified by the supplied form ID and renders its current validity inside a child component.
When to use it
Read metadata by form ID
A reusable component needs access to metadata for a particular form context when the ID is available.
Keep metadata access type-safe
A typed form ID is available from form.id or a field's formId property.
Interview questions
QWhat does useFormMetadata do?
It is a React hook that obtains form metadata by subscribing to the context established by FormProvider. The formId argument selects which form metadata to return.
Follow-up: How would you preserve type safety? Use FormId<Schema, FormError> rather than string, or pass a Conform-provided typed ID such as form.id.
QWhat are the parameter and return value?
Its formId parameter is the id attribute assigned to the form element. The hook returns the form metadata object, which is the same object returned by useForm.
Follow-up: What should a component do when several form contexts are present? Pass the ID of the intended form so the hook selects that form's metadata.
QHow can TypeScript inference be improved?
Use a FormId<Schema, FormError> type when possible because it improves inference for the returned metadata. Conform-generated IDs such as form.id and fields.fieldName.formId already carry this type.
Follow-up: What is the trade-off of using string? The code remains usable, but TypeScript can no longer check that the ID matches the expected form metadata types.
Related
useFormuseFieldFormProviderFormId<Schema, FormError>