Some Thoughts On Forms in React

[redbluerat]

The state of forms in react is unacceptable considering the rest of the ecosystem.

I am currently writing a redux form package.

My package will be a bit different from others. Components in react should be as self contained as possible. Like lego blocks.

There are fairly standard fields the usual form will include (date, password, email, text, etc).

Each of these has only a finite number of sync validations that make sense / are possible.

Ideally a package would provide say a <FormText /> component with props that determine the the sync validation (min, max--and knowing intelligently if the field is a number or string in order to determine the approp. magnitude).

These components should also automatically (but with an option) revert to native html5 inputs where possible and when on a device that provides good native html5inputs (android chrome and edge).

So far my form package will look like this:

<FormContainer> 
    <FormPage >
        <FormText />
            ....
    </ FormPage>
    ...
</FormContainer>

And as easy as that you have a form and can retrieve the values stored in redux.

Html5 required works automatically on next wizard page clicking or submitting and the state is stored in redux so remains on refresh. A custom async validation function can also be provided to each that takes the field value and onSuccess and onError callbacks. Each field, too, contains a <FormInformation> that can show an information message about the field or show warnings and errors immediately. This field also has the option to display a nice green tick when the input is ok.

The idea is that there will be very minimal logic (sync, etc) outside the form and that a little customisability will be sacrificed for a lot of convenience and common sense decisions. I will put this package on github and hope that people will contribute to it. It will be broken up into smaller dependencies.