react-mui-schematic-form v0.0.5

React MUI Schematic Form

Package to create dynamic forms through a schematic with MUI style sheet

Installation

npm install react-mui-schematic-form
# or
yarn add react-mui-schematic-form

Importing

import { DinamicForm } from 'react-mui-schematic-form';

Basic Usage

import React, { useState } from 'react';
import { DinamicForm } from 'react-mui-schematic-form';

const schema = [
  {
    value: 'name',
    label: 'Name',
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'textField',
  },
  {
    value: 'lastName',
    label: 'Last Name',
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'textField',
  },
  {
    value: 'username',
    label: 'Username',
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'textField',
  },
  {
    value: 'gender',
    label: 'Gender',
    control: ['Female', 'Male', 'Other'],
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'radioGroup',
    row: true,
  },
  {
    value: 'films',
    label: 'Films',
    options: ['The Shawshank Redemption', 'The Godfather', 'The Godfather: Part II', 'The Dark Knight'],
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'autocomplete',
  },
  {
    value: 'state',
    label: 'Active',
    required: true,
    gridSize: 12,
    gridSizeSmall: 12,
    gridSizeMedium: 6,
    type: 'switch',
    color: 'secondary',
    labelPlacement: 'end',
  },
];

const form = { name: '', lastName: '', username: '', gender: 'Female', films: '', state: false };

export default () => {
  const [formFields, setFormFields] = useState(form);

  const onChangeField = (index, field, value) => {
    setFormFields({
      ...formFields,
      [field]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission here
  };

  return (
    <>
      <DinamicForm
        schema={schema}
        handleSubmit={handleSubmit}
        handleFieldChange={onChangeField}
        formData={formFields}
        setFormFields={setFormFields}
        submitButtonText="Save"
        cancelButtonText="Cancel"
        showCancelButton
      />
    </>
  );
};