How to use reactive-mobx-form - 7 common examples

import React from 'react';
import { Provider } from 'mobx-react';
import { render } from 'react-dom';
// import { AppContainer } from 'react-hot-loader';
import AppState from './AppState';
import App from './App';

import { FormStore, configureValidator } from 'reactive-mobx-form';

const appState = new AppState();
const formStore = new FormStore();

configureValidator({
	language: 'ru'
});

render(
      (
          
      )
, document.getElementById('root')
);

/* if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;

<label>Notes</label>
					<div>
						
					</div>
				

				<section>
					<button disabled="{!valid}" type="submit">Submit</button>
					<button type="button">Reset</button>
				</section>
			
		);
	}
}

const ContactFormReactive = reactiveMobxForm('contacts', {
  schema: {
    firstName: ['', 'required'],
    lastName : ['', 'required'],
    email    : ['', 'required|email'],
  }
})(ContactForm);

export default ContactFormReactive;

return (
			<form>
				<h3>Restaurant food delivery</h3>

				

				<section>
					<button type="submit">Submit</button>
					<button type="button">Reset</button>
				</section>
			
		);
	}
}

const ContactFormReactive = reactiveMobxForm('contacts')(ContactForm);

export default ContactFormReactive;</form>

<label>Notes</label>
					<div>
						
					</div>
				

				<section>
					<button type="submit">Submit</button>
					<button type="button">Reset</button>
				</section>
			
		);
	}
}

const ContactFormReactive = reactiveMobxForm('contacts')(ContactForm);

export default ContactFormReactive;

<div>
					<label>Accept terms</label>
					
				</div>

				Form Dirty --- {`${dirty}`} <br>
				Form Valid - - {`${valid}`} <br>
				Submit Error  - - {`${JSON.stringify(submitError)}`} <br>
				<button type="submit">Submit</button>  is Submitting - {`${submitting}`} <br>
				<button type="button">Reset</button>
			
		);
	}
}

const ContactFormReactive = reactiveMobxForm('contacts', {
		schema: {
			'lastName': ['shevchenko', 'same:firstName'],
			'email': ['', 'required|email'],
			'acceptTerms': [true],
			'favoriteFilm': ['dieHardwerwe'],
			'sex':[''],
			'job': [''],
			'location.address.city': ['Kyiv', 'required'],
			'perons': [[], 'array']
		},
		validator: {
			errorMessages: {
				'required.location.address.city': 'Yor forgot to specify a :attribute'
			},
			attributeNames: {
				'location.address.city' : 'Your city',

<h2>Seller</h2>
				

				<h2>Buyer</h2>
				

				<section>
					<button type="submit">Submit</button>
					<button type="button">Reset</button>
				</section>
			
		);
	}
}

const ContactFormReactive = reactiveMobxForm('contacts')(ContactForm);

export default ContactFormReactive;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom'
import { Provider } from 'mobx-react';

import { FormStore } from 'reactive-mobx-form';
import App from './scripts/App';


const formStore = new FormStore();

ReactDOM.render(
	
		
			
		
	,
	document.getElementById('root')
);