Automagically manage React forms state and automatic validation with MobX
When we develop React apps and we need to manage the state of our Forms, we end up writing a lot of boilerplate code: setup the forms stores, defining the form fields, sync input data with the store, dealing with form validation, handling the form events and all form values and errors.
If you love the simplicity and the power of MobX (or even if you are not using it in your React project yet… give it a try!) you can accomplish all these tasks using the mobx-react-form package (here the Live Demo), allowing you to focus on the form data and improve the maintenance of your projects.
The package doesn’t implement custom input components, as it’s completely components-agnostic, you can use your own input components or third party components such as Material UI, React Widgets or React Select.
You can handle simple fields or complex deep nested fields as well and data serialization with straightforward and expressive api.
If you want to deal with validation, this package supports multiple Validation Modes (using external packages as plugins), which can enable you to write in different code styles to do automatic validation. Some of them can also automatically show preset error messages, for each field. Isn’t it cool? :D
Validation Modes
Click each to learn more on the available code styles, and choose what you prefer:
You can even mix more styles as the package don’t forces you to use only one mode and Async validation is supported for every modes!
Let’s install it and see how to setup a simple Login Form with email and password inputs.
npm install --save mobx-react-form
I will use DVR as Validation Mode (as I like that code style so much and it provides automatic error messages too) to check the email format and password length.
The DVR mode uses skaterdav85's validatorjs package as validation plugin which is inspired by the Laravel’s validator.
npm install --save validatorjs
Define a plugins object and pass the installed package to the DVR property.
Define a fields object to describe the form fields which will contain the Inputs Labels and the DVR Rules. Easy!
If necessary, the fields can be defined as array of objects as well.
The package allows you to also define fields properties and validation rules separately.
Before creating the Form, we can extend it to implement the Validation Handlers . (Or you can also create another object if you want to decouple the Form Events from the Form State).
The package provide some built-in and ready to use Event Handlers: onSubmit(e), onClear(e), onReset(e) & more.
Now create a new LoginForm object passing all the previously created objects to it…
… and pass the form instance to your components and select the fields for each input:
npm install --save mobx-react
We are using the bind() method on the inputs in conjunction with the “…” spread operator to automatically pass all needed properties.
Custom Bindings can be also defined if you are using custom input components with different properties.
We are done! Go to the browser window and play with the inputs to see how the validation messages changes automatically! I hope you’ll have fun!
Check out the Official Documentation for all the APIs, Plugins and implementation details.
UPDATE
MobX React Form now provides a dedicated DevTools package.
And if you want to explore how to create complex custom components, take a look to the Demo Code Repository.
The package is getting better every day and if you encounter some issue or you need support for specific implementation or want to ask for particular improvements, open an issue on the github page, I would be pleased to help you!
