1.6.0 • Public • Published

Material React Form

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




Component that generates the form, self-closing


<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

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 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.


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.


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..." });



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


<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 i material-react-form

DownloadsWeekly Downloads






Unpacked Size

397 kB

Total Files


Last publish


  • nola1222