Is it possible to use Custom Form Elements in JSS? If yes, how?

Question

We are trying to include Sitecore Forms in our React Application using JSS. We're able to include regular forms, but when trying to use custom form elements using the design of the customer, we get an error: No renderer for form element type

The custom form elements have been implemented without JSS in mind, by another team. I believe the current implementation depends on MVC-Forms. We're trying to understand:

1. Are custom Form Elements even supported by JSS (we're using Sitecore 10.2)?
2. What needs to be done to make them work? Do we need to re-implement them for use with JSS?
3. Are there any tutorials or documentation for this particular use case?

Answer 1

After talking to Sitecore support, we figured out. Posting here in case someone has the same problem.

1. Yes, they are supported.
2. The html-templating has to be reimplemented. Custom form elements have a "razor view" .cshtml file that defines how they are rendered. This essentially has to be "translated" into JSX (in our case where we're using react), or whatever HTML templating your frontend framework uses. Sitecore will not return any HTML structure, only configuration, so the .cshtml file can't be reused for the JSS approach. To associate your form element with your JSX, you use a defaultFieldFactory. It looks something like this:

import {
  Form,
  createDefaultFieldFactory,
} from "@sitecore-jss/sitecore-jss-react-forms";
import React from "react";

const myCustomFormFactory = createDefaultFieldFactory();
defaultFieldFactory.setComponent(
  "<Your-Custom-Form-Component-ID-As-Per-Error-Message>",
  (props) => {
    return (
     // The following reproduces whatever code was in your .cshtml
     <div>
      <label className={props.field.model.cssClass}>{props.field.name</label>
      <input className={props.field.model.cssClass}>{props.value}</input>
     </div>
    );
  }
);

export const SitecoreForm = (props: Props) => (
    <Form
      form={props.fields}
      sitecoreApiHost={<API_HOST>}
      sitecoreApiKey={<API_KEY>}
      fieldFactory={myCustomFormFactory}
    />
  );

3. This documentation is somewhat helpful: https://github.com/Sitecore/jss/blob/release/19.0.0/docs/data/routes/docs/techniques/forms/en.md