Numerous Problems Multiplied
    Have ideas to improve npm?Join in the discussion! »

    mobx-react-form

    3.1.0 • Public • Published

    DocumentationLive DemoDemo CodeTutorialJoin Slack Workspace

    MobX React Form

    Reactive MobX Form State Management

    Travis Build Codecov Coverage npm node GitHub license Downloads Downloads Backers on Open Collective Sponsors on Open Collective

    NPM


    Features

    • Extensibles Validation Plugins.
    • Sync & Async Validation (w/ Promises & automatic errors).
    • Nested Fields (w/ Serialization & Validation).
    • Nested Forms (w/ Nested Submission & Validation Hooks).
    • Event Hooks, Event Handlers & Validation Hooks
    • Observers & Interceptors
    • Bindings for custom Components.
    • Support for Material UI, React Widgets, React Select & more.
    • Dedicated DevTools Package.

    Quick Start

    Edit form-quickstart

    npm install --save mobx-react-form

    Choose and Setup a Validation Plugin

    See Validation Plugins for more info on supported packages.

    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(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 an object.

    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 myForm = new MobxReactForm({ fields }, { plugins, hooks });

    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 }) => (
      <form onSubmit={myForm.onSubmit}>
        <label htmlFor={myForm.$('email').id}>
          {myForm.$('email').label}
        </label>
        <input {...myForm.$('email').bind()} />
        <p>{myForm.$('email').error}</p>
    
        {/* ... other inputs ... */}
    
        <button type="submit" onClick={myForm.onSubmit}>Submit</button>
        <button type="button" onClick={myForm.onClear}>Clear</button>
        <button type="button" onClick={myForm.onReset}>Reset</button>
    
        <p>{myForm.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

    1. Fork the repository
    2. Make applicable changes (with tests!)
    3. To run tests: yarn test
    4. Ensure builds succeed: yarn run build
    5. Commit via yarn to run pre-commit checks: yarn 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]

    Install

    npm i mobx-react-form

    DownloadsWeekly Downloads

    8,482

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    1.17 MB

    Total Files

    64

    Last publish

    Collaborators

    • avatar