How to I render custom components with JSON Forms?

General
1

I have my own custom HTML Components (Textbox, Dropdown, Checkbox etc.) with styling and I want to reuse them. Is there a way to do that with JSON Forms? Also, the rating eg in the docs is tied with rating property is there a way with JSON Forms where I mention the type of control to be rendered and my custom component is rendered

[original thread by abhikapuria]

2

Hi @abhikapuria, thanks for your interest in JSON Forms. The rating control is an example for overwriting the default integer control with a more specialized one. In the same way you can overwrite the default boolean control with your checkbox, the default text with your textbox and the default enum with your dropdown. I would like to suggest to start with the react-seed, copy the RatingControl and adapt it to overwrite something different, for example the default boolean control with your own checkbox. You will then need to register your new renderer in the index.tsx, similar to the RatingControl.

3

Note that if you only want to change the look of the generated material inputs you can use the material ui theme support.

4

[abhikapuria]

Thanks for the response will try with the input you provided.