FormProvider

フォームコンテキストのための Context Provider をレンダリングする React コンポーネントです。 useField や useFormMetadata フックを使用したい場合には必須です。

1import { FormProvider, useForm } from '@conform-to/react';
2
3export default function SomeParent() {
4  const [form, fields] = useForm();
5
6  return <FormProvider context={form.context}>{/* ... */}</FormProvider>;
7}

#プロパティ

`context`

フォームコンテキストです。これは useForm で作成され、 form.context を通じてアクセスできます。

#Tips

FormProvider は、フォームの直接の親である必要はありません。

入力が form 属性を通じて関連付けられている限り、フォームの外部のどこにでも自由に入力を配置できます。

1function Example() {
2  const [form, fields] = useForm();
3  return (
4    <FormProvider context={form.context}>
5      <div>
6        <form id={form.id} />
7      </div>
8      <div>
9        <input name={fields.title.name} form={form.id} />
10      </div>
11    </FormProvider>
12  );
13}

FormProvider はネストすることができます

これは、レイアウトの制約のために 1 つのフォームを別のフォームの内部に配置する必要がある場合に便利です。

1import { FormProvider, useForm } from '@conform-to/react';
2
3function Field({ name, formId }) {
4  //  formId が指定されていない場合、 useField は最も近い FormContext を探します。
5  const [meta] = useField(name, { formId });
6
7  return <input name={meta.name} form={meta.form} />;
8}
9
10function Parent() {
11  const [form, fields] = useForm({ id: 'parent' });
12  return (
13    <FormProvider context={form.context}>
14      <form id={form.id} />
15
16      <Field name={fields.category.name} />
17      <Child />
18    </FormProvider>
19  );
20}
21
22function Child() {
23  const [form, fields] = useForm({ id: 'child' });
24
25  return (
26    <FormProvider context={form.context}>
27      <form id={form.id} />
28      <Field name={fields.title.name} />
29
30      {/* これは代わりに 'id' が 'parent' のフォームコンテキストを探します。 */}
31      <Field name={fields.bar.name} formId="parent" />
32    </FormProvider>
33  );
34}