Campo personalizado renderers

renderers personalizado cambiar la presentación sin mover cálculos, visibilidad, requisitos o validación de form0-core.

Anulaciones scoped

Prefiera FieldRegistryProvider cuando una aplicación, ruta, prueba o historia del libro de cuentos necesita un renderer conjunto aislado:

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 recibe el contrato de campo utilizado por los valores predeterminados:

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

Conservar las propiedades de accesibilidad suministradas en inputProps.

Casos de registro y anulaciones globales

Utilice createFieldRegistry({ includeDefaults, renderers }) para una instancia de registro explícita. El nivel de módulo registerFieldComponent, unregisterFieldComponent, y resetFieldComponents Los helpers mutan el registro predeterminado compartido y es mejor reservarlos para aplicaciones bootstrap o Pruebas.

Solo se pueden registrar los tipos de campo declarados por form0-core. Un nuevo tipo de campo schema debe ser primero definido en Core; un React renderer solo no puede extender el contrato schema.