tessl/npm-rjsf--material-ui

Material UI theme integration for react-jsonschema-form providing dual v4/v5 compatibility with Material Design components, widgets, fields, and themes for JSON schema-based forms.

—

Pending

Overview

Eval results

Files

Form Components

Name: tessl/npm-rjsf--material-ui
Author: tessl

Pre-configured form components with Material UI themes and all necessary widgets, fields, and templates for creating JSON schema-based forms.

Capabilities

MuiForm (Default)

The default form component with Material UI v4 styling and theme configuration.

/**
 * Default Material UI v4 form component created with withTheme(Theme)
 * @param props - Standard FormProps from @rjsf/core
 * @returns JSX.Element
 */
declare const MuiForm: React.ComponentType<FormProps<any>>;

Usage Example:

import Form from "@rjsf/material-ui";

const schema = {
  type: "object",
  properties: {
    title: { type: "string", title: "Title" },
    description: { type: "string", title: "Description" }
  }
};

function MyForm() {
  return (
    <Form
      schema={schema}
      formData={{ title: "Hello", description: "World" }}
      onSubmit={({formData}) => console.log("Data:", formData)}
    />
  );
}

MuiForm4

Explicit Material UI v4 form component (alias for MuiForm).

/**
 * Explicit Material UI v4 form component
 * @param props - Standard FormProps from @rjsf/core
 * @returns JSX.Element
 */
declare const MuiForm4: React.ComponentType<FormProps<any>>;

Usage Example:

import { MuiForm4 } from "@rjsf/material-ui";
// or
import Form from "@rjsf/material-ui/v4";

MuiForm5

Material UI v5 form component with @mui/material theme integration.

/**
 * Material UI v5 form component created with withTheme(Theme5)
 * @param props - Standard FormProps from @rjsf/core
 * @returns JSX.Element
 */
declare const MuiForm5: React.ComponentType<FormProps<any>>;

Usage Example:

import { MuiForm5 } from "@rjsf/material-ui";
// or
import Form from "@rjsf/material-ui/v5";

function MyForm() {
  return (
    <Form
      schema={schema}
      formData={formData}
      onSubmit={handleSubmit}
      onError={handleError}
    />
  );
}

Form Props

All form components accept the standard FormProps from @rjsf/core:

interface FormProps<T = any> {
  /** JSON Schema defining the form structure */
  schema: JSONSchema7;
  /** Current form data */
  formData?: T;
  /** UI Schema for customizing form appearance */
  uiSchema?: UiSchema;
  /** Custom error list component */
  ErrorList?: React.ComponentType<ErrorListProps>;
  /** Custom fields for the form */
  fields?: { [name: string]: Field };
  /** Custom widgets for the form */
  widgets?: { [name: string]: Widget };
  /** Array field template */
  ArrayFieldTemplate?: React.ComponentType<ArrayFieldTemplateProps>;
  /** Object field template */
  ObjectFieldTemplate?: React.ComponentType<ObjectFieldTemplateProps>;
  /** Field template */
  FieldTemplate?: React.ComponentType<FieldTemplateProps>;
  /** Submit handler */
  onSubmit?: (data: ISubmitEvent<T>, nativeEvent: React.FormEvent<HTMLFormElement>) => void;
  /** Change handler */
  onChange?: (data: IChangeEvent<T>, id?: string) => void;
  /** Error handler */
  onError?: (errors: AjvError[]) => void;
  /** Blur handler */
  onBlur?: (id: string, data: T) => void;
  /** Focus handler */
  onFocus?: (id: string, data: T) => void;
  /** Whether to show error list */
  showErrorList?: boolean;
  /** Whether to live validate */
  liveValidate?: boolean;
  /** Validation AJV options */
  validate?: ValidateFunction<T>;
  /** Whether form is disabled */
  disabled?: boolean;
  /** Whether form is readonly */
  readonly?: boolean;
  /** Whether to omit extra data */
  omitExtraData?: boolean;
  /** Whether to live omit extra data */
  liveOmit?: boolean;
  /** Custom validate function */
  customValidate?: CustomValidator<T>;
  /** Custom form context */
  formContext?: any;
  /** Custom transform errors function */
  transformErrors?: ErrorTransformer;
  /** ID prefix for form elements */
  idPrefix?: string;
  /** Whether to autofocus first field */
  autoComplete?: string;
  /** HTML form attributes */
  id?: string;
  className?: string;
  name?: string;
  method?: string;
  target?: string;
  action?: string;
  autoComplete?: string;
  encType?: string;
  acceptCharset?: string;
  noValidate?: boolean;
  /** Custom submit button */
  children?: React.ReactNode;
}

Integration Examples

With Custom Validation

import Form from "@rjsf/material-ui/v5";
import { CustomValidator } from "@rjsf/core";

const customValidate: CustomValidator = (formData, errors) => {
  if (formData.password !== formData.confirmPassword) {
    errors.confirmPassword.addError("Passwords don't match");
  }
  return errors;
};

function ValidatedForm() {
  return (
    <Form
      schema={schema}
      customValidate={customValidate}
      showErrorList={true}
      liveValidate={true}
    />
  );
}

With Custom Widgets

import Form from "@rjsf/material-ui/v5";
import { Slider } from "@mui/material";

const RangeWidget = (props: WidgetProps) => (
  <Slider
    value={props.value || 0}
    onChange={(_, value) => props.onChange(value)}
    min={props.schema.minimum || 0}
    max={props.schema.maximum || 100}
  />
);

const customWidgets = {
  RangeWidget: RangeWidget,
};

function CustomForm() {
  return (
    <Form
      schema={schema}
      widgets={customWidgets}
      uiSchema={{
        slider: { "ui:widget": "RangeWidget" }
      }}
    />
  );
}

With Form Context

import Form from "@rjsf/material-ui/v5";

const formContext = {
  theme: "dark",
  user: { id: 1, name: "John" }
};

function ContextualForm() {
  return (
    <Form
      schema={schema}
      formContext={formContext}
    />
  );
}

Install with Tessl CLI