Have you ever considered how many forms you make while developing a web application? And I'm not talking about complex forms like custom date-picker or something more complicated, but simple forms with three input, two select and one textarea?

I did not count. But when I started writing another application on React, and I had to create 5 different forms in one evening - I poplohelo. Well, when the developer gets worse, the developer writes the bike!

Out of such considerations, the library has come into being yet damp, but already used by me in two different projects, a library for creating the simplest forms on React. And I will even highlight the simplest word, because my hand-made article doesn’t even stand close to such projects as React Forms or Formsy-React .

Instead of a picture to attract attention - the amount of the same type of code that we all have to write in order to create the simplest form with one field.

Formulation of the problem

After some reflection, I realized that I wanted to have React-component at hand ready:

• Render a form consisting of the simplest elements (input, select, textarea) each of which is easily customizable (placeholder, default value, type for input, and so on) ...
• ... and having only one Submit button, the text and behavior of which is customizable ...
• ... not having ready-made styles, but capable of taking classes to its elements.
• Automatically collect data from the form itself into a flat JSON object with the specified keys.
• Have the simplest form validation mechanism.
• Show errors related to a specific form field, as well as a general error for the entire form.

After a while, another requirement was added:

• In some way, the form description (but not the rendering itself) must be identical for React and React Native.

The last requirement appeared after the decision to cut the project on React-native. I really did not want to rewrite all forms for the second time.

Decision

The option that currently suits me on almost all points is mgr-form-react . Something is not yet finalized, something is forgotten, but everything is so simple that it can be added very quickly and painlessly. But let's go through the main ideas.

At once an example of the elementary form from documentation on GitHub:

import Form from "mgr-form-react"; export default TestComponent = () => { //    const controls = [ { element: 'input', //  .   input, select, textarea id: 'Signup.Client.Form.Control.Name', // id DOM-  control' label: 'Client name', //       type: 'text' //  input' }, { element: 'select', id: 'Signup.Client.Form.Control.Language', label: 'Client language', options: ['en', 'fr', 'it', 'de', 'ru', 'es'] //     select' } ]; //        const submit = { text: 'Submit button text', cb: (data) => { console.log(data); } }; //       const editable = true; return <Form controls={controls} submit={submit} editable={editable} />; } 

That's all. By the amount of code, of course, it doesn’t become shorter, but it is more pleasant for me to separate the content of the form (that is, the fields that are present in the form) from how the form is rendered.

Now preparing the same component for React-native. Plus, the format of the description of the form in the form of a JSON document I see in that it can be defined on the server and read by the client. Thus, we will not have to wait 2 weeks on average until the customers update their application to prevent them, say, from leaving the feedback without an email address to contact.

So far, the number of customizable form parameters is not very large, but there are plans to add various functions, such as defining onInput, onChange, onFocus, onBlur behavior for form fields, adding buttons, registering your own field types (that is, if you need to use something more complex than input, select or textarea, it should be possible to register your component and use it in the form description) and so on. And, of course, the project is open for pull requests.

 import Form from 'mgr-form-react'; export default TestComponent = () => { const controls = [ { element: 'input', id: 'Signup.Client.Form.Control.Name', label: 'Client name', placeholder: 'Client name', default: 'Default name value', type: 'text', data: 'name', //   cb   submit         "name"      validator: /^[A-Za-z0-9\s]{3,30}$/, //       formatError: 'Wrong name format', // ,   ,       class: 'custom-input-class' // css-        }, { element: 'select', id: 'Signup.Client.Form.Control.Language', label: 'Client language', options: ['en', 'fr', 'it', 'de', 'ru', 'es'], default: 'en', data: 'language', class: 'custom-select-class' } ]; const submit = { text: 'Submit button text', cb: (data) => { console.log(data); // { name: "Default name value", language: "en" }        } }; const errors = { 'Signup.Client.Form.Control.Name': 'Name field error that is generated by someone outside of the form (eg server response error)', //       id 'Signup.Client.Form.Control.Name'. general: 'A general error that will be shown under the form itself' //     div' }; const editable = true; return <Form controls={controls} submit={submit} errors={errors} editable={editable} />; } 

Styles

As mentioned above, I needed a component that generates forms without styles. Thus, styles are added no matter how the form was created — using mgr-form-react or in some other way.
The structure of the classes in the generated form will be as follows:

• mgrform-form - class wrapper for the whole form
• mgrform-control - class - wrapper for each form field.
• mgrform-has-error - class added to mgrform-control in case of an error for this field (either a validation error or an error from the component parameters)
• mgrform-submit-btn - form button class
• mgrform-error - the class div of the element showing the global form error.
• elements with the mgrform-control and mgrform-submit-btn classes are added to the classes specified in the class properties of the form field description objects (the object in the controls array) and the submit object.

Conclusion

I fully understand that this is a good example of cycling. However, it is very convenient for me to describe simple forms that do not require complex logic within themselves, in any form that can be saved to a separate file with the possibility of subsequent reuse in other projects.

Of course, I am open to criticism, and of course I will be glad if this craft keeps someone to save 5-10 minutes of work time, which can be spent on another cup of coffee.

PS I didn’t really google the existing solutions of a similar type, I will be glad if someone points me to them. thank