Newline Proliferating Maniac

    @ashgkwd/mobx-react-form

    1.6.1 • Public • Published

    MobX React Form

    Automagically manage React forms state and automatic validation with MobX.

    Travis Build Codecov Coverage npm node GitHub license Downloads Downloads

    NPM


    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.

    Edit form-quickstart

    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 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 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.$('username').id}>
          {form.$('username').label}
        </label>
        <input {...form.$('username').bind()} />
        <p>{form.$('username').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!

    Install

    npm i @ashgkwd/mobx-react-form

    DownloadsWeekly Downloads

    3

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    2.4 MB

    Total Files

    44

    Last publish

    Collaborators

    • ashgkwd