Help with designing an in-house data-driven-form library.

[Ragzzy-R]

Hello,
This is probably a weird request but I felt this is the best place to reach you guys fast. We are developing an in-house form library in react similar to DDF. We have a lot of platform restrictions so we can't really go with the Markup method. So we chose a Schema based library just like DDF. I have a couple of questions, which I believe you guys would have thought throw when designing DDF. So If its possible please share your wisdom :)

1. Does the library MUST use internal state? We have some alternative suggestions where the consumer of the library handles the values themselves and pass it to the library, the library just update it and send it back on OnChange()s. This is just one alternative we were thinking.

2. if we go with the alternative suggestion, how will you pass in the values? one suggestion is, pass in with the Schema as a "value" property. But it becomes cumbersome for the consumer to keep track of things because the schema hardly change after the form loads but the value changes more often. Another alternative is to just have another prop to the library called values which is a Map of fieldKeys:values.

any help is appreciated. I just want to know if you tried one way or other and faced some challenges. Thanks in Advance :)

[rvsia]

Hello,

we actually thought about allowing to use different form state solutions as we are now developing a custom form state library and we would like to allow users to gradually migrate from Final Form - but we didn't decide to do it as it would introduce a lot of work for a feature that nobody would probably use. 😄

1. The library does not have to have an internal state.

2. I guess the best way how to do is to take a look on libraries like FinalForm, React Hook form, etc. and just copy their approach.

I wouldn't pass values as an object/map, but I would pass several functions (with a common api.) I guess the minimal API could look like this (based on experiences with Final Form):

registerField(name) => subscribe a react component to changes (react redux is a nice example how to subscribe a react component)
unregisterField(name) => unsubscribe a react component from changes
getFieldState(name) => returns value etc.
changeFieldState(name, newState) => updates a state, i.e.: changeFieldState('name', { value: 'new-name' })

Of course, this just a minimal example that would need a lot of additions in case of making complex form. (Validations are fun.)

Otherwise, if there is a chance that you could use DDF, we can help with implementation of missing features. Let us know!

[Ragzzy-R]

Hey! Thanks a ton for such a quick reply. The functions approach is intriguing. I will try to pass this around with my team and see what we could come up with. Also, although its not my decision to make, looking at DDF, it looks like something we can look into. so we will definitely explore DDF more.

Once again thank you for quickly responding :)

Regards
Ragzzy