tessl/npm-rjsf--core

A React component that automatically generates interactive web forms from JSON Schema definitions.

—

Pending

Overview

Eval results

Files

Registry System

Name: tessl/npm-rjsf--core
Author: tessl

The registry system provides configurable collections of fields, widgets, and templates that define how forms are rendered. It includes default implementations and allows for complete customization of form behavior.

Capabilities

getDefaultRegistry Function

Returns the default registry containing all built-in fields, widgets, and templates provided by @rjsf/core.

/**
 * Get the default registry with all built-in components
 * @returns Default registry without schemaUtils (added by Form component)
 */
function getDefaultRegistry<
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormContextType = any
>(): Omit<Registry<T, S, F>, 'schemaUtils'>;

Usage Examples:

import { getDefaultRegistry } from "@rjsf/core";

// Get default registry
const defaultRegistry = getDefaultRegistry();

// Extend default registry with custom components
const customRegistry = {
  ...defaultRegistry,
  widgets: {
    ...defaultRegistry.widgets,
    CustomTextWidget: MyCustomTextWidget,
    CustomSelectWidget: MyCustomSelectWidget,
  },
  fields: {
    ...defaultRegistry.fields,
    CustomStringField: MyCustomStringField,
  }
};

// Use with Form component
<Form
  schema={schema}
  validator={validator}
  widgets={customRegistry.widgets}
  fields={customRegistry.fields}
  templates={customRegistry.templates}
/>

Registry Interface

Complete registry interface containing all components and configuration needed for form rendering.

interface Registry<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  /** Field components for different schema types */
  fields: RegistryFieldsType<T, S, F>;
  /** Template components for layout and presentation */
  templates: TemplatesType<T, S, F>;
  /** Widget components for input controls */
  widgets: RegistryWidgetsType<T, S, F>;
  /** Root schema being processed */
  rootSchema: S;
  /** Form context passed to all components */
  formContext: F;
  /** Schema utilities for processing schemas */
  schemaUtils: SchemaUtilsType<T, S, F>;
  /** Translation function for internationalization */
  translateString: (str: TranslatableString, params?: string[]) => string;
}

RegistryFieldsType Interface

Collection of field components that handle different JSON Schema types.

interface RegistryFieldsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  /** Handles anyOf schema unions */
  AnyOfField: ComponentType<FieldProps<T, S, F>>;
  /** Handles array type schemas */
  ArrayField: ComponentType<FieldProps<T, S, F>>;
  /** Handles boolean type schemas */
  BooleanField: ComponentType<FieldProps<T, S, F>>;
  /** Handles number and integer type schemas */
  NumberField: ComponentType<FieldProps<T, S, F>>;
  /** Handles object type schemas */
  ObjectField: ComponentType<FieldProps<T, S, F>>;
  /** Handles oneOf schema unions */
  OneOfField: ComponentType<FieldProps<T, S, F>>;
  /** Root field router that determines which field to render */
  SchemaField: ComponentType<FieldProps<T, S, F>>;
  /** Handles string type schemas */
  StringField: ComponentType<FieldProps<T, S, F>>;
  /** Handles null type schemas */
  NullField: ComponentType<FieldProps<T, S, F>>;
}

RegistryWidgetsType Interface

Collection of widget components that provide input controls for form fields.

interface RegistryWidgetsType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  /** Alternative date picker widget */
  AltDateWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Alternative datetime picker widget */
  AltDateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Single checkbox widget */
  CheckboxWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Multiple checkboxes widget for enum arrays */
  CheckboxesWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Color picker widget */
  ColorWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Standard date input widget */
  DateWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Standard datetime input widget */
  DateTimeWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Email input widget with validation */
  EmailWidget: ComponentType<WidgetProps<T, S, F>>;
  /** File upload widget */
  FileWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Hidden input widget */
  HiddenWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Password input widget */
  PasswordWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Radio button group widget */
  RadioWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Range slider widget */
  RangeWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Dropdown select widget */
  SelectWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Standard text input widget */
  TextWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Textarea widget for multiline text */
  TextareaWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Time input widget */
  TimeWidget: ComponentType<WidgetProps<T, S, F>>;
  /** Number input with up/down buttons */
  UpDownWidget: ComponentType<WidgetProps<T, S, F>>;
  /** URL input widget with validation */
  URLWidget: ComponentType<WidgetProps<T, S, F>>;
}

TemplatesType Interface

Collection of template components that control form layout and presentation.

interface TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
  /** Template for array field descriptions */
  ArrayFieldDescriptionTemplate: ComponentType<ArrayFieldDescriptionProps<T, S, F>>;
  /** Template for individual array items */
  ArrayFieldItemTemplate: ComponentType<ArrayFieldTemplateItemType<T, S, F>>;
  /** Template for entire array fields */
  ArrayFieldTemplate: ComponentType<ArrayFieldTemplateProps<T, S, F>>;
  /** Template for array field titles */
  ArrayFieldTitleTemplate: ComponentType<ArrayFieldTitleProps<T, S, F>>;
  /** Base template for input widgets */
  BaseInputTemplate: ComponentType<BaseInputTemplateProps<T, S, F>>;
  /** Template for field descriptions */
  DescriptionFieldTemplate: ComponentType<DescriptionFieldProps<T, S, F>>;
  /** Template for error list display */
  ErrorListTemplate: ComponentType<ErrorListProps<T, S, F>>;
  /** Template for individual form fields */
  FieldTemplate: ComponentType<FieldTemplateProps<T, S, F>>;
  /** Template for field-specific errors */
  FieldErrorTemplate: ComponentType<FieldErrorProps<T, S, F>>;
  /** Template for field help text */
  FieldHelpTemplate: ComponentType<FieldHelpProps<T, S, F>>;
  /** Template for object fields */
  ObjectFieldTemplate: ComponentType<ObjectFieldTemplateProps<T, S, F>>;
  /** Template for field titles */
  TitleFieldTemplate: ComponentType<TitleFieldProps<T, S, F>>;
  /** Template for unsupported field types */
  UnsupportedFieldTemplate: ComponentType<UnsupportedFieldProps<T, S, F>>;
  /** Template for additional properties wrapper */
  WrapIfAdditionalTemplate: ComponentType<WrapIfAdditionalTemplateProps<T, S, F>>;
  /** Collection of button templates */
  ButtonTemplates: {
    /** Form submit button */
    SubmitButton: ComponentType<SubmitButtonProps<T, S, F>>;
    /** Add array item button */
    AddButton: ComponentType<IconButtonProps<T, S, F>>;
    /** Copy array item button */
    CopyButton: ComponentType<IconButtonProps<T, S, F>>;
    /** Move array item down button */
    MoveDownButton: ComponentType<IconButtonProps<T, S, F>>;
    /** Move array item up button */
    MoveUpButton: ComponentType<IconButtonProps<T, S, F>>;
    /** Remove array item button */
    RemoveButton: ComponentType<IconButtonProps<T, S, F>>;
  };
}

Registry Usage Patterns

Custom Registry Creation

import { getDefaultRegistry } from "@rjsf/core";

// Create custom registry with extended widgets
const createCustomRegistry = () => {
  const defaultRegistry = getDefaultRegistry();
  
  return {
    ...defaultRegistry,
    widgets: {
      ...defaultRegistry.widgets,
      // Override existing widgets
      TextWidget: CustomTextWidget,
      SelectWidget: CustomSelectWidget,
      // Add new widgets
      RichTextWidget: RichTextEditor,
      CodeEditorWidget: CodeEditor,
    },
    templates: {
      ...defaultRegistry.templates,
      // Override field template
      FieldTemplate: CustomFieldTemplate,
      // Override error list
      ErrorListTemplate: CustomErrorList,
      ButtonTemplates: {
        ...defaultRegistry.templates.ButtonTemplates,
        SubmitButton: CustomSubmitButton,
      }
    },
    fields: {
      ...defaultRegistry.fields,
      // Add custom field for complex schemas
      MultiSelectField: MultiSelectField,
    }
  };
};

const customRegistry = createCustomRegistry();

<Form
  schema={schema}
  validator={validator}
  widgets={customRegistry.widgets}
  templates={customRegistry.templates}
  fields={customRegistry.fields}
/>

Widget Registration by Schema Properties

// Register widgets based on schema format or custom properties
const getWidgetForSchema = (schema, uiSchema) => {
  // Use format to determine widget
  if (schema.format === 'markdown') return 'MarkdownWidget';
  if (schema.format === 'color') return 'ColorWidget';
  if (schema.format === 'date') return 'DateWidget';
  
  // Use custom UI schema properties
  if (uiSchema?.['ui:widget']) return uiSchema['ui:widget'];
  
  // Use enum for select widgets
  if (schema.enum) return 'SelectWidget';
  
  // Default text widget
  return 'TextWidget';
};

const customWidgets = {
  ...getDefaultRegistry().widgets,
  MarkdownWidget: MarkdownEditor,
  ColorWidget: ColorPicker,
  DateWidget: DatePicker,
};

Dynamic Field Registration

// Register fields based on schema structure
const getDynamicFields = () => {
  const fields = getDefaultRegistry().fields;
  
  return {
    ...fields,
    // Custom field for objects with specific patterns
    AddressField: ({ schema, ...props }) => {
      if (schema.properties?.street && schema.properties?.city) {
        return <AddressFormField {...props} />;
      }
      return <fields.ObjectField schema={schema} {...props} />;
    },
    // Custom field for arrays with specific item types
    TagArrayField: ({ schema, ...props }) => {
      if (schema.items?.type === 'string' && schema.items?.enum) {
        return <TagSelector {...props} />;
      }
      return <fields.ArrayField schema={schema} {...props} />;
    }
  };
};

Registry with Conditional Components

const createConditionalRegistry = (userRole) => {
  const defaultRegistry = getDefaultRegistry();
  
  const adminWidgets = {
    AdminSelectWidget: AdminSelect,
    DatabaseWidget: DatabaseQuery,
  };
  
  const readOnlyTemplates = {
    FieldTemplate: ReadOnlyFieldTemplate,
    ObjectFieldTemplate: ReadOnlyObjectTemplate,
  };
  
  return {
    ...defaultRegistry,
    widgets: {
      ...defaultRegistry.widgets,
      ...(userRole === 'admin' ? adminWidgets : {}),
    },
    templates: {
      ...defaultRegistry.templates,
      ...(userRole === 'viewer' ? readOnlyTemplates : {}),
    }
  };
};

const registry = createConditionalRegistry(currentUser.role);

Lazy-Loaded Registry Components

import { lazy, Suspense } from 'react';

// Lazy load heavy components
const RichTextWidget = lazy(() => import('./widgets/RichTextWidget'));
const ChartWidget = lazy(() => import('./widgets/ChartWidget'));

const createLazyRegistry = () => {
  const defaultRegistry = getDefaultRegistry();
  
  return {
    ...defaultRegistry,
    widgets: {
      ...defaultRegistry.widgets,
      RichTextWidget: (props) => (
        <Suspense fallback={<div>Loading editor...</div>}>
          <RichTextWidget {...props} />
        </Suspense>
      ),
      ChartWidget: (props) => (
        <Suspense fallback={<div>Loading chart...</div>}>
          <ChartWidget {...props} />
        </Suspense>
      ),
    }
  };
};

Install with Tessl CLI