Skipping ui-schema for Custom Renderers in JSON Forms

General
1

Hi everyone,

I’m looking to skip using the ui-schema and instead handle UI rendering directly through custom renderers. My goal is to have the form fields adjust dynamically based on the screen size, such as displaying them in 2, 3, or 4 columns depending on the available screen width.

For example, I have a schema with 7 fields, including input fields, dropdowns, and checkboxes. I want these fields to be displayed in a column layout that adapts to the screen size, providing an optimized view for various devices.

Is there any React package that supports such dynamic layouts? Additionally, any suggestions on the best way to implement this would be greatly appreciated!

Thanks in advance!

2

Hi @niloy06,

In case you are using Material UI, then this should be rather straightforward. You can implement a custom layout renderer. That one then arranges the grid for the dispatched to children based on the screen size. See here for the docs.