react-jsonschema-formにて、FormのExperimental featuresをためしてみた

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の24日目の記事です。

react-jsonschema-form (RJSF) の機能の中には Experimental features と呼ばれる機能があります。

この機能は

Warning: This API is experimental and unstable, therefore breaking changes may be shipped in minor or patch releases. If you want to use this feature, we recommend pinning exact versions of @rjsf/* packages in your package.json file or be ready to update your use of it when necessary.

と今後変わる可能性があるため、使うのをためらいます。

ただ、どんな機能なのかをおさえておくのは大切だと思ったので、さわった時のメモを残します。

　
目次

環境

• react-jsonschema-form 5.15.0
• React 18.2.0
• React Router 6.20.1

arrayMinItems について

この機能は、JSON Schemaの定義が type="array" なときに minItems を考慮して行を初期表示するか制御します。
arrayMinItems | <Form /> Props | react-jsonschema-form

　
挙動を決めるフラグ arrayMinItems が取り得る値は3つです。

そこで、以下の必須のarrayと任意のarrayを定義したJSON Schemaを元に、どのように表示されるかを比べてみます。

const schema: RJSFSchema = {
  title: "Array Min Item",
  type: "object",
  required: ["requiredArray"],
  properties: {
    requiredArray: { type: "array", items: { type: "string" }, minItems: 1 },
    optionalArray: { type: "array", items: { type: "string" }, minItems: 1 }
  }
}

all (デフォルト) の場合

まずは、Formの props に experimental_defaultFormStateBehavior に {arrayMinItems: { populate: 'all' }} を渡します。

<Form schema={schema} validator={validator}
      experimental_defaultFormStateBehavior={{
        arrayMinItems: { populate: 'all' }
      }}
/>

　
すると、必須・任意のarrayとも、minItems: 1 に従って1行ずつ初期表示されました。

requiredOnly の場合

次に {arrayMinItems: { populate: 'requiredOnly' }} を渡したところ、必須のarrayのみ1行が初期表示されました。

never の場合

最後に {arrayMinItems: { populate: 'never' }} を渡したところ、いずれも初期表示行はありませんでした。

emptyObjectFields について

この機能はJSON Schemaで default が定義されている時の表示を制御します。
emptyObjectFields | <Form /> Props | react-jsonschema-form

ちなみに、上記のドキュメントにあるサンプルコードは arrayMinItems のものなことに注意します。

　
今回は、必須項目と任意項目にそれぞれ default を設定したJSON Schemaを元に、表示を比べてみます。

const schema: RJSFSchema = {
  title: 'EmptyObjectFieldsForm',
  type: "object",
  required: ["requiredField"],
  properties: {
    requiredField: {
      type: "string",
      default: "foo"
    },
    optionalField: {
      type: "string",
      default: "bar"
    }
  }
}

populateAllDefaults (デフォルト) の場合

まずは、 emptyObjectFields: 'populateAllDefaults' を渡した時の表示です。

<Form schema={schema} validator={validator}
  experimental_defaultFormStateBehavior={{
    emptyObjectFields: 'populateAllDefaults'
  }}
/>

　
この時は、必須・任意の両項目とも default の値が設定されました。

populateRequiredDefaults の場合

次に emptyObjectFields: 'populateRequiredDefaults' を渡した場合です。

この時は、必須項目のみ default の値が設定されました。

skipDefaults の場合

最後に emptyObjectFields: 'skipDefaults' を渡した場合です。

この時は、必須・任意の両項目とも default の値は設定されませんでした。

allOf の場合

この機能は allOf を使って select box が表示する時に、初期選択の値として default を使うかどうかを制御します。
allOf | <Form /> Props | react-jsonschema-form

　
今回はドキュメントに記載されているJSON Schemaを元に各設定をためしてみます。

const schema: RJSFSchema = {
  title: "All Of Form",
  type: "object",
  properties: {
    animalInfo: {
      properties: {
        animal: {
          type: "string",
          default: "Cat",
          enum: ['Cat', 'Fish']
        }
      },
      allOf: [
        {
          if: {
            properties: {
              animal: {
                const: 'Cat'
              }
            }
          },
          then: {
            properties: {
              food: {
                type: "string",
                default: "meat",
                enum: ["meat", "grass", "fish"]
              }
            },
            required: ['food']
          }
        }
      ]
    }
  }
}

skipDefaults (デフォルト)の場合

まずは allOf: 'skipDefaults' を渡した時の表示です。

<Form schema={schema} validator={validator}
    experimental_defaultFormStateBehavior={{
      allOf: 'skipDefaults'
    }}
/>

　
この場合、 allOf の方は空欄になりました。

populateDefaults の場合

次は allOf: 'populateDefaults' を渡した時の表示です。

この場合、いずれも default で定義した値が設定されました。

ソースコード

Githubにあげました。
https://github.com/thinkAmi-sandbox/rjsf_advent_calendar_2023

今回のプルリクはこちら。
https://github.com/thinkAmi-sandbox/rjsf_advent_calendar_2023/pull/21