Champ personnalisé renderers

renderers personnalisé change de présentation sans déplacer les calculs, la visibilité, les exigences ou validation hors form0-core.

Dérogations visées

Préférez FieldRegistryProvider lorsqu'une application, une route, un test ou une histoire de Storybook a besoin d'une isolé renderer ensemble:

Code
import { FieldRegistryProvider, FormRenderer } from "form0-react"
import { DateField } from "./date-field.jsx"

export function AppForm({ schema }) {
  return (
    <FieldRegistryProvider renderers={{ DateField }}>
      <FormRenderer schema={schema} />
    </FieldRegistryProvider>
  )
}

Un renderer reçoit le contrat de champ utilisé par les valeurs par défaut:

Code
function DateField({ field, value, onChange, readOnly, inputProps, className }) {
  return (
    <input
      {...inputProps}
      className={className}
      type="date"
      value={value ?? ""}
      disabled={readOnly}
      onChange={(event) => onChange(event.target.value)}
    />
  )
}

Préservez les propriétés d'accessibilité fournies dans inputProps.

Instances de registre et remplacements globaux

Utilisez createFieldRegistry({ includeDefaults, renderers }) pour une instance de Registre explicite. registerFieldComponent, unregisterFieldComponent, et resetFieldComponents helpers muter le registre partagé par défaut et sont mieux réservés pour l'application bootstrap ou tests.

Seuls les types de champs déclarés par form0-core peuvent être enregistrés. défini dans Core; un React renderer seul ne peut pas prolonger le contrat schema.