[QUESTION] Create a custom component

[frances-datacom]

Hi,

I'm having trouble figuring out how to create a custom component for the FormBuilder. All the examples I've seen online use JavaScript, but my project uses TypeScript.

I have a codesandbox link that hopefully illustrates the issue: https://codesandbox.io/p/sandbox/sleepy-worker-65cylh

The firstname code comes from this example: https://codesandbox.io/p/sandbox/distracted-butterfly-rzy27w

Any help you can offer would be greatly appreciated!

[Romakita]

Hi @frances-datacom

I think this issue must be addressed to the formio team. this repo concern @tsed/react-formio which is a fork of the @formio/react package with some additional features (like tailwind themes).

But because I already had this issue, I help you ;)

The main point when you want to enable you custom component in the form builder, is to check if your component name have the same case between the object set to .setComponent and the name given the form builder.

I fixed your issue like that:

const Builder = () => {
  return (
    <div className="App">
      <FormBuilder
        //components={components}
        form={{ display: "form" }}
        options={{
          builder: {
            basic: {
              components: {
                firstName: true, /// case!!!!
              },
            },
          },
        }}
      />
    </div>
  );
};

See you

[github-actions]

🎉 Are you happy?

If you appreciated the support, know that it is free and is carried out on personal time ;)

A support, even a little bit makes a difference for me and continues to bring you answers!

[frances-datacom]

Turns out it was that small, huh? Thank you for your help! I'll see what I can figure out to make the component into Typescript rather than Javascript, and how to get the control to render properly on the FormBuilder. It currently shows this: