React. New library for react forms.
Tags: react, javascript, webdev, form
Published: 2022-03-22 09:20:13

Good day, my name is Nikolay! I am one of the developers of the new library for react forms.

How much time do you spend to creating react form from project to project?

This question is relevant for many React developers.

The formMOD library was created to reduce the development time, as well as for universe and flexibility.

You can create a great web applications!

This is absolutely free library (MIT license).

At the time of this writing, this is a completely finished project, with documentation and the system is already being used in web applications.

I will try to describe all the features of the library as briefly as possible.All examples and the detailed description are in the documentation.

**THIS IS SHORTLY SUMMARY OF ALL FEATURES OF LIBRARY.**

**WE RECOMMEND TO USE LAPTOP OR PC FOR DOCUMENTATION.**

Full documentation:

[http://doc.formmod.org/](Link)

Source code in github:

[https://github.com/nickorsk2017/formMOD](Link)


At the moment, this project at the stage of community development. That mean, the library is finished and now people need to know about it.

PLEASE set a GitHub stars:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yxsw9uexb07t9ospwqw.png)
 
[https://github.com/nickorsk2017/formMOD](Link)

Let’s go!

=================================================

**Example**

First, let's look at an example of a form that is made using the library.

[https://doc.formmod.org/#/example](Link)

**What using there:**

- Multiple validation rules of form fields.
- Optional fields
- Group fields (hobbies)
- View mode and create mode of form

=================================================

**Data**

-  Form scheme. All data and form settings are stored in the schema, which is also a state.

-  Abstract data model. This means that the library knows nothing about your system, inputs, store, business logic. This gives you maximum flexibility and coverage as it doesn't create unnecessary dependencies.

=================================================

**Validation**

The following rules are available out of the box:
empty, email, max, min.

And you can also write your rules (custom rule).

**See documentation.**

=================================================
**UI logic**

-  **Basic inputs**

Flow for creating simple components.These are text fields, buttons, and other.

Documentation:

[https://doc.formmod.org/#/basic/](Link)

-  **Optional inputs**

These are UI components of the form that depend on the values of other fields form.

For example, if you put a checkbox, then another field will appear.

To do this, use the visibilities hook in form schema.

Documentation:

[https://nickorsk2017.github.io/formMOD/#/optional/](Link)

-  **Group inputs**

You can add and remove form fields on the fly.That is, it is a list of form fields with values.

Documentation:

[https://doc.formmod.org/#/group/](Link)

-  **Combined inputs**

These are composite components consisting another UI components inside. Since the formMOD system is abstract, you can use it not only in a form, but also inside UI components.

Documentation:

[https://doc.formmod.org/#/combined/](Link)

=================================================

**CRUD**

The system allows you to use one form component for viewing, editing or creating data.
This saves time and reduces bugs because you have one component for everything.

- Edit mode

[https://doc.formmod.org/#/editmode/](Link)

- View mode

[https://doc.formmod.org/#/viewmode/](Link)

=================================================

**Gallery UI**

This is a set of ready-made UI components, they can be downloaded and modified.The new components will be added later.

- Textinput

[https://doc.formmod.org/#/gallery-textinput/](Link)

- Textarea

[https://doc.formmod.org/#/gallery-textarea/](Link)

- Checkbox

[https://doc.formmod.org/#/gallery-checkbox/](Link)

- Fileinput

[https://doc.formmod.org/#/gallery-fileinput/](Link)

- SearchInput

[https://doc.formmod.org/#/gallery-searchInput/](Link)

- Button

[https://doc.formmod.org/#/gallery-button/](Link)

=================================================

**Recommendations**

In the documentation you can learn how to work with data, store and other things.

-  Data converters

[https://doc.formmod.org/#/recommendations/converters/](Link)

- Work with store

[https://doc.formmod.org/#/recommendations/stores/](Link)

=================================================

**Helpers**

FormMOD uses utilities internally.These utilities may be useful for your work as well.This eliminates unnecessary dependencies and makes the job easier.

Look here:

[https://doc.formmod.org/#/helpers/](Link)

=================================================

**Smart inputs (experiment)**

In the experimental plan, it is possible to create UI components through a special reference object.

This reduces the size of the code and makes working with UI inputs more convenient.

=================================================

**What next?**

All examples and code are described in the documentation, I will not duplicate it so as not to make the article too voluminous.

We really need your support, set a star on github here:

[https://github.com/nickorsk2017/formMOD](Link)

Have a peace and good luck!