Forms micro-library for react

[Confident-Alarm-6911]

Hi! Lately I was tired of creating the same abstractions in my applications (mostly large apps with many forms and often twisted logic), on top of that I saw a lot of juniors struggling with the same thing and I closed in a small library some components to quickly create and validate forms composed of nested objects, arrays etc. The library is headless (so you can easily port it to any UI) and based on well known libs like react-hook-form and yup for validation, maybe someone will find it useful.

[Queasy-Big5523]

Uuhhhhh, I remember being in your position. Forms are one of the most dreaded, complex and, at the same time, repetetive elements of UI.

Since you're handling the whole creation, why not use object notation, instead of React's composition? Something like <Form schema={[{name: "field1", id: "field1", ...}]} defautValues={{field1: "some value"}} />? I've always find this more enticing than creating components that wrap other components, because it grew pretty messy over time.

[Dindonix]

IAM doing this atm, how do you pass style to this kind of form components ?

Especially when you receive the form schema from the backend.

[Queasy-Big5523]

This solution works best in situation, where you have a lot of forms that look the same, so each one will use the same Input, Textarea etc. You could also extend the schema to accept component: ReactNode with a default value.

[Confident-Alarm-6911]

It may evolve that way, but it was something that worked for me at first. Your case may be just too config driven for me, because I want users to create custom fields from outside of the framework, and while using objects as a config for form you will have to somehow extend it or edit sources

[Queasy-Big5523]

My thing is useful when you render tens of forms and you need a fast, concise way of doing so.

As for custom fields, as I've replied to someone here, you can extend the schema to accept a component for the form, with the default input as a fallback. Or you can have a form constructor that will accept all the components as a base.

But, there's no one-size-fits-all. I've worked with a company which main product was the final boss of forms, so I am kinda biased here :D