Improvement notes to the documentation

[yamilelias]

Hey! I love the work that you have done with react-zorm. Also, we are actively using it in a production-ready product. In another discussion, you said that you want to "keep it simple". I'm down for that. Even React Native maintainers thought the same after adding too much to the library lol.

However, there are some scenarios in which some need specific details on usage (that are not found elsewhere). For example, on our team, we have two scenarios that we want to achieve using react-zorm:

1 Use an image input validation: It never gets the image validated and it is not part of event.data. Also, it triggers a typescript error. You can find a codesandbox with the example
2. Add initialValues to the form: For example, when you are in an Edit User Form. I feel this is a common scenario that is not documented and can be of great value for the users in this repo

Let me know what you think. Maybe I'm the one that is not doing things right and I'm missing some things on the documentation. Also, if you need help, I volunteer to help you improve it if you want.

[esamattis]

Thanks @yamilelias! 😊 I really appreciate the feedback!

Files

This probably an area we can improve on. To be honest I have not thought of this use case at all yet.

Validation

The validation seems to work for me thought. Something I'm missing here?

Being part of event.data

It is part of the event.data. The JSON.stringify() might just be confusing here because it cannot stringify File objects and renders them just as an emtpy object {}. console.log() will display it properly.

Type Error

The type error is because of .any(). React Zorm works on the type-level and any is basically a black hole to it which stops all type evaluation. .instanceof(File) should work here but at the moment it does not because it does not understand that the File type is an actual value and not part of the chain. But this can be fixed pretty easily. Opened an issue.

Initial Values

The idea is just that you provide defaultValue props for the inputs.

But if you are asking if React Zorm could provide a initialValues option to the useZorm() hook or something similar, there few caveats why I'm hesitant to provide it.

Because React Zorm does not manage the form state itself we would have to inject the values to the DOM elements in an internal useEffect() hook. This would work for simple forms but what if you have fields that are rendered dynamically. React Zorm have no idea when these fields appear to the dom and even if did it would be hard to known whether to inject the values or not without tracking the full form inside React Zorm.

Another caveat is that we allow controlled components and custom components as well. In React it is not allowed to modify input states externally when they are controlled.

ps. I edited your post to fix the codesandbox link.

[esamattis]

Hey @yamilelias, made a prerelease which enables .instanceof(File) and forked your example to use it:

https://codesandbox.io/s/react-zorm-image-input-forked-p5cds1?file=/src/App.tsx

You can try it with

npm install --save-exact [email protected]

The PR is here #37

UPDATE: Released this in v0.7.0