react-mui-form-generator v0.1.2

react-mui-form-generator

Built on top of @mui, react-hook-form and yup.

Schema builder library for generating and validating (simple) material-ui forms. Just define your schema, add it to the default FormGenerator component with any callback function and create your form.

This library is under development

Features

• Schema interface for generating Material-ui forms or steppers
• Support for standard and dynamic forms (2-levels)
• Easy to personalize - just create your own theme or style a component
• Uses React-Hook-Forms to control dynamic form elements
• Supports Yup validation

Table of Content

• Installation
• Getting Started
• Example
• Table of Contents
• Building schemas
  • Schema Basics
  • Schema Configurations
  • Form Options
  • Field Properties
  • Field Icon Options

Installation

npm install react-mui-form-generator

Getting Started

1. Create new react app with create-react-app
2. Edit App Component
3. Import FormGenerator component and any (preset) FieldConfugration
4. Import predefined field definitions (such as login fields)
5. Define your schema
6. Code your form callback function
7. Render your app

Example

Sample of stepper schema with callback function

import React, { useState, useEffect } from 'react';
import { FormGenerator, FormConfiguration, CheckboxFields, DarkTheme } from '../../plugin';

const schema = { 
  ...FieldConfiguration.classic,
  showStepHeader: false,   
    forms: [
        {
            step: 1,                
            fieldDefinitions: [     
               	LoginFields.email,           
                LoginFields.password
            ]               
        },      
    ]
}

const Comp = () => {
    const [formResult, setFormResult] = useState(null);    
    useEffect( () => {            
        if(formResult) {
            alert('Form is ready')            
        }                     
    }, [ formResult ]);

    return (<>
        <DarkTheme>
            <FormGenerator
                schema={schema}
                setFormResult={setFormResult}           
            />
        </DarkTheme>
    </>);
}

export default Comp;

• Table of Contents
• Building schemas
  • Schema Basics
  • Schema Configurations
  • Form Options
  • Field Properties
  • Field Icon Options

Quickstart Samples

Table of Contents

• Building Schemas
  • Form Schema
  • Stepper Schema

Building schemas

Both Forms and Steppers are generated from flexible schemas that use supported @mui fields and field definitions to generate Material-UI forms. A schema defines one or multiple step where each step is considered to be a form. A form definitions has one or multiple fields where each field can have its own Yup validation rule and input type - for instance a textfield or textareafield.

Schema Basics

A Schema is the configuration object that is used to generate any @mui stepper or single form.

Properties

Schema Configurations

This library provides three configurations for Material-UI forms to speed up your coding process. To use them import the FieldConfiguration object.

Usage

const schema = {
  ...
  ...FieldConfiguration.classic,
  // your overrides
  showStepHeader: false,   
  ...  
}

More info and schema samples

Form Options

Schema.forms defines one or multiple steps. Each step object holds an identifier and @mui field definitions

More info and field definitions samples

Field Properties

Field Options | Option | Type | Required | Field(s) | Description | |-----------------------|:-------------:|:----------:|:-----------------|:---------------------------------------------------| | fieldName | string | yes | All | | | label | string | yes | | | | value | string, number, string[], number[] | no | Used to set start value | | helperText | string | null | no | | | | startItemText | string | mull | no | | | | headerText | string | null | no | | | | input | string | yes | | Controlled Material-Ui field component. See below for options | | inputType | string | no | TextField | email, password, text, date | | validation | any | no | All | Yup validation rule | | visibility | boolean | yes | All | Show field when form is first displayed | | required | boolean | no | All | Force validation as soon as form is dirty | | icon | object | no | TextField, TextArea | Show icon - see below | | multiline | boolean | no | TextArea | | | rows | number | no | TextArea | | | minRows | number | no | TextArea | |
| maxRows | number | no | TextArea | |

Field Icon Options