A similar library

[nkalpak]

I'll preface this by saying: great work on the library!! I love seeing how other people approach similar problems.

How I got here

A few weeks ago I ran across a Twitter thread that mentioned declarative form building using a Zod schema. Since I've used JSON schema based form libraries before, I was aware of the amazing DX that can be achieved by building forms declaratively, and I started imagining how great it could be with Zod, given it's excellent contribution to type safety.

I tried to find a library that does this but didn't manage to. I guess I couldn't find your library because I was searching for keywords such as "zod form", "zod schema form", "zod declarative form", but this library doesn't mention "zod" in the name.

So, armed with my prior JSON schema form knowledge and a bunch of motivation, I set out to build my own! Two weeks later, I put ZodForm out there. I posted about it in the T3 discord channel, where someone told me about this library, so I decided to take a look.

Goals & Tradeoffs

I am writing this so that we can have a discussion about the goals (common or non-common) of the two (seemingly similar) libraries.

ZodForm's goals

• Provide an excellent TypeScript user experience. A user of the library should, with minimal effort to manually provide types, get a fully typed experience from the definition of the form schema
• Provide most of the necessary tools for a user to configure the form declaratively. To that end, it implements:
  • Conditional rendering of fields
  • Layouts
• Provide a Form component which can render a form given a set of pre-configured components. Once the user pre-configures the components, it should require minimal effort to render complex forms using them. For this, it implements:
  • Array field rendering
  • Object field rendering
  • A mapping between most zod types and a component type to be rendered - see components
• Provide a minimal API surface area for a user to learn. To that end, all components that the user needs to define receive all the necessary configuration through props

My questions about react-ts-form

• What's the reasoning behind the dependency on react-hook-form? This is very interesting to me because I didn't think of using RHF to manage the form internally.. and the more I think of it, the more I see it as a good idea
• Does react-ts-form intend to implement dynamic object rendering? When I tried it, it seemed to require me to register every possible object shape as a custom component
• Does react-ts-form intend to implement dynamic array rendering?

Conclusion

I opened this discussion for two reasons:

• To share my appreciation for the work you've done, and to share some of my thoughts about declarative form building
• To learn more about the goals/non-goals of this library, so that I can make a more informed decision about how to proceed with my own

All that being said, I'm excited to hear your thoughts!

[iway1]

Hi! Thanks for your post.

What's the reasoning behind the dependency on react-hook-form? This is very interesting to me because I didn't think of using RHF to manage the form internally.. and the more I think of it, the more I see it as a good idea

I used react-hook-form for a couple reasons:

1. Didn't wanna implement form state management myself
2. A lot of people already know how react-hook-form works and it has a lot of features already. This library allows passing a form prop that is a react-hook-form object, which allows devs to manage form state in a way that might be familiar to them and leverage existing react hook form apis.

Does react-ts-form intend to implement dynamic object rendering? When I tried it, it seemed to require me to register every possible object shape as a custom component

That's intended and I think makes sense for how the rest of the library works. I don't think there's a need to add something like that but I could be wrong. The use case for objects in this library is for defining complex input types, which in theory should have a well defined schema ahead of time.

Does react-ts-form intend to implement dynamic array rendering?

We can implement a component that can dynamically add and remove array elements react-ts-form, but that's up to the developer to build that.

The primary goal of this library is to reduce the work required when implementing a new form to just defining the schemas required for that form. In my experience, a lot of forms just require doing this:

1. defining a validation schema
2. creating form state that uses schema for validation.
3. writing component jsx / hooking up components to form state

So, this library is just meant to get rid of steps 2 and 3.

The main purpose is to just allow devs to define forms faster but allow enough customization to meet varied design requirements easily.

We now support defining layouts easily =D, still need to add documentation on that feature but it should handle any layout since it just allows writing plain JSX for the layout

[nkalpak]

It seems like we have a bit different goals then regarding the API surface area.

Thanks for the explanation, cheers!