DEV Community

Cover image for React. New library for react forms.
Nickolay Stepanov (Nick)
Nickolay Stepanov (Nick)

Posted on

React. New library for react forms.

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/

Source code in github:

https://github.com/nickorsk2017/formMOD

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://github.com/nickorsk2017/formMOD

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

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/

  • 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/

  • 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/

  • 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/

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

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/

  • View mode

https://doc.formmod.org/#/viewmode/

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

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/

  • Textarea

https://doc.formmod.org/#/gallery-textarea/

  • Checkbox

https://doc.formmod.org/#/gallery-checkbox/

  • Fileinput

https://doc.formmod.org/#/gallery-fileinput/

  • SearchInput

https://doc.formmod.org/#/gallery-searchInput/

  • Button

https://doc.formmod.org/#/gallery-button/

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

Recommendations

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

  • Data converters

https://doc.formmod.org/#/recommendations/converters/

  • Work with store

https://doc.formmod.org/#/recommendations/stores/

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

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/

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

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

Have a peace and good luck!

Top comments (0)