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

Fields

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

Custom field components for specific rendering needs like titles and descriptions. Fields handle the display of metadata and structural elements within forms.

Capabilities

DescriptionField

Displays field description text using Material UI Typography component with consistent styling.

/**
 * Displays field description using Typography component with subtitle2 variant
 * @param props - FieldProps containing description and schema information
 * @returns JSX.Element
 */
declare const DescriptionField: React.ComponentType<FieldProps>;

Features:

Uses Typography with subtitle2 variant for consistent text styling
Integrates with Material UI theme typography scale
Handles rich text descriptions when provided
Responsive text sizing

Usage:

Automatically rendered when schema contains description property
Can be customized through theme configuration

Example:

const schema = {
  type: "object",
  description: "Please fill out your personal information below.",
  properties: {
    name: { type: "string", title: "Full Name" }
  }
};

// Description will be automatically rendered above the form fields

TitleField

Displays field title text using Material UI Typography h5 variant with an optional divider for visual separation.

/**
 * Displays field title using Typography h5 variant with Divider
 * @param props - FieldProps containing title and schema information
 * @returns JSX.Element
 */
declare const TitleField: React.ComponentType<FieldProps>;

Features:

Uses Typography h5 variant for prominent title display
Includes Divider component for visual separation
Integrates with Material UI theme typography and color system
Handles nested object titles and form section headers

Usage:

Automatically rendered when schema contains title property
Used for form titles and section headers
Can be styled through Material UI theme

Example:

const schema = {
  type: "object",
  title: "User Registration Form",
  properties: {
    personalInfo: {
      type: "object",
      title: "Personal Information",
      properties: {
        name: { type: "string" },
        email: { type: "string" }
      }
    }
  }
};

// Will render "User Registration Form" as main title
// and "Personal Information" as section title

Field Props

All field components receive the FieldProps interface:

interface FieldProps {
  /** Field name/key */
  name: string;
  /** Field title text */
  title?: string;
  /** Field description text */
  description?: string;
  /** Field properties for object types */
  properties?: { [key: string]: any };
  /** JSON Schema for this field */
  schema: JSONSchema7;
  /** UI Schema for this field */
  uiSchema?: UiSchema;
  /** Current form data for this field */
  formData?: any;
  /** Form context object */
  formContext?: any;
  /** Field identifier schema */
  idSchema?: IdSchema;
  /** Whether field is required */
  required?: boolean;
  /** Whether field is disabled */
  disabled?: boolean;
  /** Whether field is readonly */
  readonly?: boolean;
  /** Whether field is hidden */
  hidden?: boolean;
  /** Change handler */
  onChange?: (value: any) => void;
  /** Blur handler */
  onBlur?: (id: string, value: any) => void;
  /** Focus handler */
  onFocus?: (id: string, value: any) => void;
  /** Validation errors */
  rawErrors?: string[];
  /** Error schema */
  errorSchema?: ErrorSchema;
  /** Form registry */
  registry?: Registry;
}

Field Collection Export

Both fields are available as a collection:

interface FieldCollection {
  DescriptionField: React.ComponentType<FieldProps>;
  TitleField: React.ComponentType<FieldProps>;
}

declare const Fields: FieldCollection;

Usage Examples

Custom Field Integration

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

const customFields = {
  ...Fields,
  CustomHeaderField: ({ title }) => (
    <div style={{ 
      backgroundColor: '#f5f5f5', 
      padding: '16px',
      borderRadius: '4px' 
    }}>
      <h2>{title}</h2>
    </div>
  ),
};

function FormWithCustomFields() {
  return (
    <Form
      schema={schema}
      fields={customFields}
      uiSchema={{
        "ui:field": "CustomHeaderField"
      }}
    />
  );
}

Field Styling with Material UI Theme

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Form from "@rjsf/material-ui/v5";

const theme = createTheme({
  typography: {
    h5: {
      color: '#1976d2',
      fontWeight: 600,
    },
    subtitle2: {
      color: '#666',
      fontStyle: 'italic',
    },
  },
});

function ThemedForm() {
  return (
    <ThemeProvider theme={theme}>
      <Form schema={schema} />
    </ThemeProvider>
  );
}

Conditional Field Display

const ConditionalDescriptionField = (props: FieldProps) => {
  const { formContext, description } = props;
  
  // Only show description in verbose mode
  if (!formContext?.verbose) {
    return null;
  }
  
  return <Fields.DescriptionField {...props} />;
};

const customFields = {
  ...Fields,
  DescriptionField: ConditionalDescriptionField,
};

function ConditionalForm() {
  return (
    <Form
      schema={schema}
      fields={customFields}
      formContext={{ verbose: true }}
    />
  );
}

Rich Text Description Field

import { Typography } from "@mui/material";
import { FieldProps } from "@rjsf/core";

const RichDescriptionField: React.FC<FieldProps> = ({ description }) => {
  if (!description) return null;

  return (
    <Typography 
      variant="body2" 
      color="textSecondary"
      sx={{ 
        mb: 2,
        p: 2,
        backgroundColor: 'grey.50',
        borderRadius: 1,
        border: '1px solid',
        borderColor: 'grey.300'
      }}
      dangerouslySetInnerHTML={{ __html: description }}
    />
  );
};

const customFields = {
  ...Fields,
  DescriptionField: RichDescriptionField,
};

Material UI Integration

Both field components integrate deeply with Material UI:

Typography: Uses Material UI typography system for consistent text styling
Theme Integration: Respects Material UI theme colors, fonts, and spacing
Responsive Design: Adapts to different screen sizes using Material UI breakpoints
Accessibility: Includes proper ARIA attributes and semantic HTML structure
Customization: Can be styled through Material UI theme overrides

The fields automatically inherit Material UI theme properties and respond to theme changes, ensuring consistent appearance across your application.

Install with Tessl CLI