mobx-react-form-raken
v0.0.0-development
Published
Automagically manage React forms state and automatic validation with MobX.
Downloads
11
Maintainers
Readme
MobX React Form
Automagically manage React forms state and automatic validation with MobX.
Features
- Automatic Reactive Form State Management with MobX Magic.
- Automatic Reactive Validation & Error Messages.
- Validation Plugins & Multiple Validation Styles.
- Nested Fields (w/ Serialization & Validation).
- Nested Forms (w/ Nested Submission & Validation Hooks).
- Dynamically Add/Del Nested Fields.
- Support for Sync & Async Validation functions (w/ Promises).
- Fields Props Bindings for custom Components.
- Support for Material UI, React Widgets, React Select & more.
- Dedicated DevTools Package.
Documentation
https://foxhound87.github.io/mobx-react-form
Live Demo
https://foxhound87.github.io/mobx-react-form/demo.html
Demo Code
https://github.com/foxhound87/mobx-react-form-demo
Tutorial
Automagically manage React forms state and automatic validation with MobX
Quick Start
npm install --save mobx-react-form
Choose and Setup a Validation Plugin
See Validation Plugins & Modes and Supported Validation Packages for more info.
Below we are creating a plugins
object using the validatorjs
package to enable DVR
functionalities (Declarative Validation Rules).
import validatorjs from 'validatorjs';
const plugins = { dvr: validatorjs };
Define the Form Fields
Define the fields
as a collection with a rules
property for the validation.
const fields = [{
name: 'email',
label: 'Email',
placeholder: 'Insert Email',
rules: 'required|email|string|between:5,25',
}, {
name: 'password',
label: 'Password',
placeholder: 'Insert Password',
rules: 'required|string|between:5,25',
}, {
name: 'passwordConfirm',
label: 'Password Confirmation',
placeholder: 'Confirm Password',
rules: 'required|string|same:password',
}];
You can also define
fields
as anobject
.
Define the Validation Hooks
const hooks = {
onSuccess(form) {
alert('Form is valid! Send the request here.');
// get field values
console.log('Form Values!', form.values());
},
onError(form) {
alert('Form has errors!');
// get all form errors
console.log('All form errors', form.errors());
}
}
Initialize the Form
Simply pass the fields
, plugins
and hooks
objects to the constructor
import MobxReactForm from 'mobx-react-form';
const form = new MobxReactForm({ fields }, { plugins, hooks });
Pass the form to a react component
The package provide some built-in and ready to use Event Handlers:
onSubmit(e)
, onClear(e)
, onReset(e)
& more...
import React from 'react';
import { observer } from 'mobx-react';
export default observer(({ form }) => (
<form onSubmit={form.onSubmit}>
<label htmlFor={form.$('email').id}>
{form.$('email').label}
</label>
<input {...form.$('email').bind()} />
<p>{form.$('email').error}</p>
{/* ... other inputs ... */}
<button type="submit" onClick={form.onSubmit}>Submit</button>
<button type="button" onClick={form.onClear}>Clear</button>
<button type="button" onClick={form.onReset}>Reset</button>
<p>{form.error}</p>
</form>
));
Other Field Props are available. See the docs for more details.
Extending the Form class
See how to implement the same configuration of this quickstart extending the Form class
Contributing
If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.
And don't forget to star the repo, I will ensure more frequent updates! Thanks!
Contributors
This project exists thanks to all the people who contribute.
Backers
Thank you to all our backers! 🙏 [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]