Documentation • Live Demo • Demo Code • Tutorial • Join Discord Channel

MobX React Form

Reactive MobX Form State Management

GitHub Workflow Status (with branch) GitHub release (latest by date) npm bundle size GitHub closed pull requests GitHub closed issues

Features

Quick Start

npm install --save mobx-react-form

Choose and Setup a Validation Plugin

Below we are creating a plugins object using the validatorjs package to enable DVR functionalities (Declarative Validation Rules).

import dvr from 'mobx-react-form/lib/validators/DVR';
import validatorjs from 'validatorjs';

const plugins = {
  dvr: dvr({
    package: validatorjs
  })
};

> See Validation Plugins for more info on supported packages.

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',
  type: 'password',
}, {
  name: 'passwordConfirm',
  label: 'Password Confirmation',
  placeholder: 'Confirm Password',
  rules: 'required|string|same:password',
  type: 'password',
}];

> See Fields Definitions and all available Field Props on the docs.

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());
  }
}

> See more on the docs about the Validation Hooks and the Event Hooks

Initialize the Form

Simply pass the fields, plugins and hooks objects to the constructor

import MobxReactForm from 'mobx-react-form';

const myForm = new MobxReactForm({ fields }, { plugins, hooks });

> Learn more on the docs about the Form Instance and the Form Options

Pass the myForm 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(({ myForm }) =&gt; (
  <form>
    <label>
      {myForm.$('email').label}
    </label>
    <input>
    <p>{myForm.$('email').error}</p>

    {/* ... other inputs ... */}

    <button type="submit">Submit</button>
    <button type="button">Clear</button>
    <button type="button">Reset</button>

    <p>{myForm.error}</p>
  </form>
));

> See more on the docs about the Field Props Bindings

Extending the Form class

See how to implement the same configuration of this quickstart extending the Form class

Contributing

Fork the repository
Make applicable changes (with tests!)
To run tests: npm run test
Ensure builds succeed: npm run build
Commit and run pre-commit checks: npm run commit

New Issues

When opening new issues, provide the setup of your form in a CodeSandbox.

These issues, and the ones which provides also PR with failing tests will get higher priority.

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]

Most popular functions for mobx-react-form

To help you get started, we’ve selected a few mobx-react-form examples, based on popular ways it is used in public projects.

mobx-react-form/lib/validators/VJF

mobx-react-form