maestroform v0.1.1
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 :
-> 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
In lieu of a formal styleguide, take care to maintain the existing coding style. Test your code!
##Release History
- 0.1.1 Initial release