Maestroform NPM

MaestroForm

A new, intuitive and easy way to create Forms using React.

##Installation

npm install maestroform --save

##Example

MaestroForm allows you to create react forms in a simple JSON way, look at this example :

<MaestroForm.Form
	// A target function to execute on Form' Submit
    onSubmit = {this.signIn}

    // A target function to execute when Form is considered as Valid
    onValid = {this.enableButton}

    // A target function to execute when Form is considered as InValid
    onInvalid = {this.disableButton}

    // Now here is the list of your Fom components as inputs or buttons
    formComponents = {
        [{
            "kind" : "input",
            "type" : "mail",
            "name" : "Mail Input",
            "placeholder" : "Mail",
		    // A conditions' list to be verified by the field to be validated
            "conditions" : ["mail"],
		    // A target function to execute when field is considered as Valid
            "onValid" : this.onValidField,
		    // A target function to execute when field is considered as inValid
            "onInvalid" : this.onInvalidField,
            "required" : true
        }, {
            "kind" : "input",
            "type" : "password",
            "name" : "Password Input",
            "onValid" : this.onValidField,
            "onInvalid" : this.onInvalidField,
            "placeholder" : "Password",
            "required" : true
        }, {
            "kind" : "button",
            "type" : "submit",
            "name" : "Submit Button",
            "inlineText": "Connexion"
        }]
    }
/>

In this example, a simple two-inputs form is created with a validation button; and as you can see MaestroForm is completely modular thanks to it's onValid and onInvalid options that allows you to keep plenty control on user's interactions with the form.

##How To Use It?

First, take a look at the structure of MaestroForm :

enter image description here -> To see a bigger version of this picture, or simply if you can't see it, please click here <-

As you can see, there is a kind of hierarchy in the behaviour of MaestroForm : for example, the kind and type of component that you choose determines the use of other component options.
If the software estimate that there is a logical error in your declaration it will display a custom error message.
:exclamation: kind and type are required for a component :exclamation:

##What About My CSS?

Don't panic! We we thought of that too ;)
When a component is created we directly apply on it a custom className, for example here:

formComponents = {
        [{
            "kind" : "input",
            "type" : "mail"
        }, {
            "kind" : "input",
            "type" : "password"
        }, {
            "kind" : "button",
            "type" : "submit"
        }]
    }

The first input will have m-input0 as classname, the second m-input1, and the button m-button2 : you now understand that it is composed of "m-" followed by the kind of the component and it's indexation in the JSON component list.
In completion, the class m-valid or m-invalid are added if the field is considered as valid or invalid.

##Validation conditions

You saw that you can choose a bunch of validation conditions and also some functions that will be called on proper time.

####Field Validation

When called, these function take as parameter an object tike that :
{
   result: Boolean,
	  value: String,
	  target: String,
	  index: Number
}
Result is just use to identify if the fiels is valid or invalid ( true means valid and false invalid)
The value is set at null if result is true, and contains the validation condition witch was not verified if result is false.
Target is simply the targeted className of the component as a string (ex: "m-input2 m-valid", or "m-input4 m-invalid"...)
Index refers to the the position of the component in your JSON declaration.

####Global Validation

These functions are called when all fields have been checked : if one of them is considered as invalid, the onInvalid targeted function is called, else, the onValid function is called.
When called, these functions receive an array containing index of invalid objects.

##Contributing