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:
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:
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)