ReactControlPlugin

Interface Definition

interface ReactControlPlugin extends ControlPlugin {
  EditComponent: React.ComponentType<EditComponentProps>;
  ViewComponent?: React.ComponentType<ViewComponentProps>;
  DesignComponent?: React.ComponentType<DesignComponentProps>;
}

EditComponentProps

interface EditComponentProps {
  control: FormControl;          // Full control config from schema
  value: any;                    // Current field value
  onChange: (value: any) => void; // Called when value changes
  onBlur: () => void;            // Called when field loses focus
  error?: string;                // Validation error message (undefined if valid)
  mode: FormOperatingMode;       // Current operating mode
  disabled?: boolean;            // True if control should be non-interactive
  readOnly?: boolean;            // True in view/preview modes
}

ViewComponentProps

interface ViewComponentProps {
  control: FormControl;          // Full control config
  value: any;                    // Value to display (formatted)
  mode: FormOperatingMode;       // Current mode
}

DesignComponentProps

interface DesignComponentProps {
  control: FormControl;          // Default config for preview
  // No value, onChange, onBlur — design is static
}

Complete Plugin Example

import React from 'react';
import type { ReactControlPlugin, EditComponentProps, ViewComponentProps } from '@atlas-forms/types-js';

// Edit component (interactive)
const StarRatingEdit: React.FC<EditComponentProps> = ({ value, onChange, error }) => (
  <div className="star-rating">
    {[1, 2, 3, 4, 5].map(star => (
      <button
        key={star}
        onClick={() => onChange(star)}
        className={star <= (value ?? 0) ? 'active' : ''}
        aria-label={`Rate ${star} stars`}
      >
        ★
      </button>
    ))}
    {error && <span className="error">{error}</span>}
  </div>
);

// View component (read-only)
const StarRatingView: React.FC<ViewComponentProps> = ({ value }) => (
  <div>{'★'.repeat(value ?? 0)}{'☆'.repeat(5 - (value ?? 0))}</div>
);

// Plugin registration object
export const starRatingPlugin: ReactControlPlugin = {
  type: 'myorg:star-rating',
  label: 'Star Rating',
  group: 'input',
  icon: 'star',
  description: '1–5 star rating selector',
  defaultConfig: { maxStars: 5 },
  EditComponent: StarRatingEdit,
  ViewComponent: StarRatingView,
};

Component Rendering by Mode