Campo personalizzato renderers

Personalizzato renderers cambiare presentazione senza spostare i calcoli, la visibilità, i requisiti, o convalida di form0-core.

Scoped overrides

Preferisci FieldRegistryProvider quando un'applicazione, un percorso, un test o una storia di Storybook hanno bisogno di un isolato renderer set:

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 riceve il contratto di campo utilizzato dai valori predefiniti:

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)}
    />
  )
}

Conservare le proprietà di accessibilità fornite in inputProps.

Istanze di registro e override globali

Utilizzare createFieldRegistry({ includeDefaults, renderers }) per un'istanza del Registro di sistema esplicita. livello di modulo registerFieldComponent, unregisterFieldComponent e resetFieldComponents helpers mutare il registro predefinito condiviso e sono meglio riservati per l'applicazione bootstrap o test.

È possibile registrare solo i tipi di campo dichiarati da form0-core. Un nuovo tipo di campo schema deve prima essere definito in Core; uno React renderer da solo non può estendere il contratto schema.