RJSF Themer

Theme creator for React JSONSchema Form (RJSF) that enables easy runtime customization of widgets and templates by field path, as well as schema normalization for improved compatibility.

Creating a Theme

import { withTheme } from '@rjsf/core';
import {
  createCustomizableTheme,
  type WidgetComponentProps,
  type TemplateComponentProps,
} from 'rjsf-themer';

const TextWidget: React.FC<WidgetComponentProps['TextWidget']> = (props) => {
  return (
    <input
      value={props.value || ''}
      onChange={(e) => props.onChange(e.target.value)}
    />
  );
};

const SelectWidget: React.FC<WidgetComponentProps['SelectWidget']> = (
  props
) => {
  return (
    <select
      value={props.value || ''}
      onChange={(e) => props.onChange(e.target.value)}
    >
      {props.options.enumOptions?.map((opt) => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  );
};

const FieldTemplate: React.FC<TemplateComponentProps['FieldTemplate']> = (
  props
) => {
  return (
    <div>
      {props.label && <label>{props.label}</label>}
      {props.children}
      {props.rawErrors?.length > 0 && <div>{props.rawErrors.join(', ')}</div>}
    </div>
  );
};

const ObjectFieldTemplate: React.FC<
  TemplateComponentProps['ObjectFieldTemplate']
> = (props) => {
  return (
    <div>
      {props.title && <h3>{props.title}</h3>}
      {props.properties.map((prop) => prop.content)}
    </div>
  );
};

const Theme = createCustomizableTheme({
  widgets: { TextWidget, SelectWidget },
  templates: { FieldTemplate, ObjectFieldTemplate },
});

export const Form = withTheme(Theme);

Usage

Simple Form

import { Form } from './path-to-your-themed-form';

<Form schema={schema} validator={validator} />;

With Customizations

import { FormCustomizationProvider } from 'rjsf-themer';

<FormCustomizationProvider
  widgets={{
    WidgetName: (props) => {
      if (props.path === 'fieldPath') {
        return <CustomWidget {...props} />;
      }
      return <props.DefaultWidget {...props} />;
    },
  }}
  templates={{
    TemplateName: (props) => {
      if (props.path === 'fieldPath') {
        return <CustomTemplate {...props} />;
      }
      return <props.DefaultTemplate {...props} />;
    },
  }}
>
  <Form schema={schema} validator={validator} />
</FormCustomizationProvider>;