SitecoreFormsCustomFields.tsx

import React from 'react';
import { InputViewModel } from "@sitecore-jss/sitecore-jss-forms";
import {
    createDefaultFieldFactory,
    FieldTypes,
    ValueFieldProps
} from '@sitecore-jss/sitecore-jss-react-forms';

export const AllFieldTypes = {
    ...FieldTypes,
    Hidden: "{B67C70C1-6776-4BCB-8529-AA28E02F6412}",
    RawHTML: "{F6ABF2D4-D864-48D7-A464-75025A42162E}",
};

const CustomFieldFactory = createDefaultFieldFactory();

CustomFieldFactory.setComponent(AllFieldTypes.Hidden, ({ field }: ValueFieldProps<InputViewModel>) => {
    return (
        <input type="hidden" id={field.valueField.id} name={field.valueField.name} value={field.model.value as string} />
    );
});

CustomFieldFactory.setComponent(AllFieldTypes.RawHTML, ({ field }: ValueFieldProps<HiddenViewModel>) => {
    return (
        <div dangerouslySetInnerHTML={{ __html: field.model.html }} />
    );
});

export default CustomFieldFactory;