Component for dynamic forms with React + Formik

Description

The Dynamic "d-dynamic-form-builder-react" is a container for dynamic forms that allows rendering and handling different forms with custom input fields.

• Description
• Installation
• Example
• Props
• Inputs
  • h1 h2 h3 h4 h5 h6
  • text
  • password
  • textarea
  • color
  • radio-group
  • select
  • checkbox
  • date
  • checkbox-group

Installation

npm i d-dynamic-form-builder-react

Example

Typescript

import { DynamicFormContainer, Form } from 'd-dynamic-form-builder-react';
import { InputProps } from 'd-dynamic-form-builder-react/dist/interfaces/interfaces';

const App = () => {

  const forms: { [x: string]: InputProps[] } = {
    login: [
      {
        type: "text",
        name: "name",
        label: "Full Name",
        placeholder: "Full Name",
        value: "",
        validations: [
          {
            type: "required",
            message: "Full Name is required",
          },
        ],
      },
      {
        type: "email",
        name: "email",
        label: "E-mail",
        placeholder: "E-mail",
        value: "",
        validations: [
          {
            type: "required",
            message: "Email is required",
          },
          {
            type: "isEmail",
            message: "Email no valid",
          },
        ],
      },
      {
        type: "password",
        name: "password",
        label: "Password",
        placeholder: "*******",
        value: "",
        validations: [
          {
            type: "required",
            message: "Password is required",
          },
        ],
      },
    ],
  };

  return (
    <>
      <DynamicFormContainer
        formSchema={forms}
        formTitle={"Form"}
      >
        {(values) => (
          <>
            <Form />
          </>
        )}
      </DynamicFormContainer>
    </>
  );
};

Props

1. formSchema (array) [required]: An array of objects that define the form fields. Each object should have the following properties:

• type (string): The type of the field. Valid types are text, number, select, and checkbox.
• name (string): The name of the field.
• value (string | number | boolean | string[] | DefaultJSON[]): The initial value for the field.
• validations (array): An array of validation rules for the field.
• placeholder (string): The placeholder text for the field.
• typeValue (string | boolean | array | date): The type of the field value.
• label (string): The label for the field.
• options (array): An array of options for the select field.
• fields (array): An array of nested form fields.

2. formTitle (string) [required]: The title of the form.
3. className (string) [optional]: The CSS class name for the form container.
4. onSubmit (function) [optional]: A function that is called when the form is submitted. The function will receive an object with the form data as the only argument.
5. initialformdata (object) [optional] The initial values for the form fields.

| Property | Type | Description | | ------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | | type | "text" | "textarea" | "email" | "password" | "radio-group" | "select" | "checkbox" | "checkbox-group" | "field-array" | The type of the input field. | | name | string | The name of the input field. | | value | string | number | boolean | string[] | DefaultJSON[] | The value of the input field. | | validations | Validation[] | (Optional) An array of validation rules for the input field. | | placeholder? | string | (Optional) The placeholder text for the input field. | | typeValue? | "string" | "boolean" | "array" | (Optional) The type of the value property. | | label? | string | (Optional) The label for the input field. | | options? | Opt[] | (Optional) An array of options for select or radio-group input fields. | | fields? | Fields[] | (Optional) An array of fields for field-array input type. Each field is of type Fields which has properties similar to InputProps. |

| Interface | Properties | Description | | --- | --- | --- | | Opt | - value: string | number- desc: string | Represents an option.- value: The value of the option.- desc: The description of the option. | | Fields | - type: "text"- name: string- label: string- placeholder?: string | Represents a field.- type: The type of the field.- name: The name of the field.- label: The label of the field.- placeholder?: (Optional) The placeholder text for the field. | | Validation | - type: "required" | "isEmail" | "minLength" | "isTrue" | "maxLength" | "matches" | "isUrl" | "maxDate" | "minDate"- value?: string | number | boolean | RegExp | Date- message: string | Represents a validation rule for a field.- type: The type of validation.- value?: (Optional) The value for the validation.- message: The validation error message. | | DefaultJSON | { [key: string]: any } | Represents a JSON object with any value types for its properties. |

h1 h2 h3 h4 h5 h6

• type (required): The type of the heading. Possible values: "h1", "h2", "h3", "h4", "h5", "h6"
• name (required): The name of the heading.
• value (required): The value of the heading.

text

• type (required): The type of the input field. Value: "text"
• name (required): The name of the input field.
• value (required): The default value of the input field.
• label (optional): The label for the input field.
• placeholder (optional): The placeholder text for the input field.
• validations (optional): An array of validation rules for the input field. Possible validation types: isEmail, isUrl, minLength, maxLength, matches, required

password

• type (required): The type of the input field. Value: "password"
• name (required): The name of the input field.
• value (required): The default value of the input field.
• label (optional): The label for the input field.
• validations (optional): An array of validation rules for the input field. Possible validation types: minLength, maxLength, matches, required

textarea

• type (required): The type of the input field. Value: "textarea"
• name (required): The name of the input field.
• value (required): The default value of the input field.
• label (optional): The label for the input field.
• validations (optional): An array of validation rules for the input field. Possible validation types: minLength, maxLength, required

color

• type (required): The type of the input field. Value: "color"
• name (required): The name of the input field.
• value (required): The default value of the input field. ("#000000") Important!
• label (optional): The label for the input field.

radio-group

• type (required): The type of the input field. Value: "radio-group"
• name (required): The name of the input field.
• value (required): The default selected value of the radio group.
• options (required): An array of options for the radio group input field. Each option should have a value and desc.

select

• type (required): The type of the input field. Value: "select"
• name (required): The name of the input field.
• value (required): The default selected value of the select field.
• label (optional): The label for the input field.
• options (required): An array of options for the select input field. Each option should have a value and desc.
• validations (optional): An array of validation rules for the input field. Possible validation types: required, minLength, maxLength

checkbox

• type (required): The type of the input field. Value: "checkbox"
• name (required): The name of the input field.
• typeValue (optional): The type of the value property.
• value (required): The default selected value of the radio group. Possible values: True, False
• label (optional): The label for the input field.
• value (required): The default value of the checkbox.
• validations (optional): An array of validation rules for the input field. Possible validation types: isTrue

date

• type (required): The type of the input field. Value: "date"
• name (required): The name of the input field.
• label (optional): The label for the input field.
• value (required): The default value of the date field.
• typeValue (optional): The type of the value property.
• validations (optional): An array of validation rules for the input field.
• Possible validation types: maxDate, minDate, required

checkbox-group

• type (required): The type of the input field. Value: "checkbox-group"
• name (required): The name of the input field.
• label (optional): The label for the input field.
• value (required): The default value of the checkbox group, represented as an array.
• typeValue (optional): The type of the value property.
• options (required): An array of options for the checkbox group input field. Each option should have a value and desc.
• validations (optional): An array of validation rules for the input field. Possible validation types: minLength, maxLength, required