Material React Form

Material React Form is a form generator for React that uses styles and components from Material UI Next ~ Demo

Documentation

src\lib\index.jsx

Form

Component that generates the form, self-closing

Example:

<Form elements={this.state.form} onChange={this.onChange} onSubmit={this.onSubmit} />

Property	Type	Required	Default value	Description
onSubmit	func	yes		Function that is called when the form is submitted
onChange	func	yes		Function that is called when an input in the form changes
elements	arrayOf	yes		Array of elements that is used by the Component to render the form
style	object	no	width: 300, margin: 5	Style to be applied to the form Component

elements[]

As you can see, the form requires an element array. This array must be made in a certain pattern. For this the library provides helper functions. This helper function is named formElementHelper. The helper function can be used like this:

import { formElementHelper } from "material-react-form";
 
const formElement = formElementHelper({
    name: "myInputName",
    label: "My Input",
    formType: "input",
    validation: { required: true }
});

Next to those 'required' props, you can pass on extra props that will be passed to the component that belongs to the formType you passed on. The current version supports 5 formTypes: input, select, multiLine, timePicker, and datePicker. Please note that the timePicker and datePicker form types need default values. The select propType accepts an options property that contains an array with all the to be shown options

The validation object supports the following 5 properties: required, minLength, maxLength, isEmail, and isNumeric.

If you want more formTypes or validation options please make an issue or make a PR on my github.

onChange(updatedForm, name, event)

This function is called when any of the input values changed. This function directly gives you the updated formArray with all the updated values and validation as the first value, the second argument is the name of the formElement that changed, the third argument is the event that was given to the original onChange function. You also directly get the inputIdentifier (your element.name) The smallest possible onChange function would be:

onChange = updatedForm => {
    this.setState({ myFormElements: updatedForm });
}

getElementByName(array, elName)

This is a helper function that you can use to easily get an item out of your array of formElements.

Example:

import { getElementByName } from "material-react-form";
 
const element = getElementByName(myFormElements, "myInputName");

changeShow(array, whatToShow, show)

This is a helper function that you can use to easily change the show property of an element in your form. The second argument is able to receive a string and an array.

Example:

import { changeShow } from "material-react-form";
 
const updatedFormElements = changeShow(myFormElements, "myInputName", false);

replaceInArray(array, name, newValues)

This helper function immutably changes one specific item in the array and then returns the new array.

Example: `

import { replaceInArray } from "material-react-form";
 
const updatedFormElements = replaceInArray(myFormElements, "myInputName", { value: "Hello..." });

src\lib\UI\Input\Input.jsx

Input

Component that is used to render all of the forms types.

Example:

<Input formType="input" {...allYourOtherProps} />

Property	Type	Required	Default value	Description
style	object	no	{}	Style to be applied to the Input Component
valid	bool	no	true	Boolean that says whether the Input is valid
validation	objectOf	no	{}	Object that gets all the validation
touched	bool	no	true	Boolean that says whether the Input Component is already touched or not
formType	enum	yes		The type of the Input Component
show	bool	no	true	Boolean that says whether the Input Component should be shown

npm