react-dynamic-kit

react-dynamic-kit is a lightweight and flexible library for creating dynamic, reusable, and highly customizable React components.

Installation

To install react-dynamic-kit, use npm Repository

  npm install react-dynamic-kit

Usage

react-dynamic-kit is a lightweight and flexible library for building dynamic and reusable components in React. It simplifies the creation of complex forms, interactive UI elements, and customizable components, making it ideal for rapidly developing scalable applications.

1. Dynamic Form

Features

• 📦 Dynamic Form Components: Build forms with nested and conditional fields effortlessly.
• ⚡ Highly Configurable: Tailor every component to your specific needs.

Properties

The DynamicForm component accepts the following properties:

1. DynamicFormProps

• The DynamicForm component accepts the following properties:

| Property | Type | Description | | -------------------------- | ------------------------------------------------------------ | ---------------------------------------------------------------------------------- | | fields | FieldSchema[] | An array of field schemas defining the form fields. | | formDefaultValue | FormSchema | The default values for the form fields. | | onSubmit | (data: FormSchema) => void | Callback function for form submission. | | fetchAutocompleteOptions | (data: string, fieldId: string) => Promise<SelectOption[]> | Function to fetch autocomplete options for fields. | | formViewMode | boolean | Boolean to determine if the form is in view mode (non-editable) or in edit mode.|

2. FieldSchema

• Each field in the form is described by a FieldSchema object, which can have the following properties:

| Name | Type | Required | Details | | --------------------- | ----------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | name | string | true | Unique identifier for the field | | label | string | true | Label to display next to the input field | | type | TextFieldType | true | Specifies the type of the field (e.g., text, email, password, etc.) | | fieldType | ComponentType | true | The type of input component to be used (e.g., TextField, SelectField, RadioField, etc.) | | dataType | DataType | true | Specifies the expected data type for the field value (e.g., string, number, boolean, date) | | groupName | string | false | Used to group related fields together | | variant | TextFieldVariants | false | Variant of the MUI TextField component (e.g., outlined, filled, standard) | | sequence | number | false | Controls the order in which fields appear in the form | | validation | ValidationRules | false | Custom validation rules for the field (e.g., required, min/max length, custom validation function) | | dateValidation | DateValidationRules | false | Date-specific validation rules (e.g., disabled dates, max/min date, age validation) | | options | SelectOption[] | false | List of options for select or multi-select fields (only applicable for select-type fields) | | nestedRootValue | string | false | Used when dealing with nested fields, refers to the root value for the nested data structure | | placeholder | string | false | Placeholder text for the input field | | helperText | string | false | Helper text for extra information about the field | | tooltip | string | false | Tooltip text displayed when the user hovers over the field | | disabled | boolean | false | Whether the field is disabled and cannot be interacted with | | isMultipleValues | boolean | false | If true, indicates the field can accept multiple values (e.g., multi-select fields) | | nestedFieldsLimit | number | false | Specifies the maximum number of nested fields allowed in the form (applicable when isMultipleValues is true) | | nestedFields | FieldSchema[] | false | Array of nested field schemas (applicable for complex forms with nested structures) |

1. Field Types

• The ComponentType defines the types of input components available for use in the DynamicForm. Each type corresponds to a specific input behavior.

|fieldType |Description| |-----------|-----------| |textField |A standard text input field | |selectField|A dropdown menu for single selection| |multiSelectField |A dropdown menu for multiple selections| |radioField |Radio buttons for exclusive selection| |dateField |A date picker input| |autoCompleteField |An autocomplete input field|

3. Field Validation Rules

• Validation rules for fields

| Name | Type | Required | Details | | --------------------- | --------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | required | boolean | false | Whether the field is required | | number | NumberValidationRules | false | Rules specific to number fields (e.g., min/max values) | | string | StringValidationRules | false | Rules specific to string fields (e.g., min/max length, regex pattern) | | customValidation | (value: string | number | boolean) => boolean | string | Custom validation function that can be used for more complex validation needs (e.g., value should not exceed a certain length) | | maxSelections | number | false | For fields that allow multiple selections (e.g., multi-select), specifies the maximum number of selections allowed | | errorMessage | string | false | Custom error message to be shown when validation fails |

4. Date Validation Rules

| Name | Type | Required | Details | | --------------------- | --------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | disabledDates | string[] | false | List of dates that should be disabled (e.g., ["2024-11-05"]) | | disabledMonths | number[] | false | List of months to disable (0 = January, 11 = December) | | disabledYears | number[] | false | List of years to disable (e.g., [2024, 2025]) | | maxDate | string | false | Specifies the maximum selectable date | | minDate | string | false | Specifies the minimum selectable date | | defaultValue | string | false | Default value for the date field (e.g., "2024-11-25") | | disabled | boolean | false | Whether the date field should be disabled | | disableFuture | boolean | false | Whether future dates should be disabled | | disablePast | boolean | false | Whether past dates should be disabled | | format | string | false | The date format to display (e.g., "YYYY-MM-DD") | | readOnly | boolean | false | Whether the field is read-only | | locale | string | false | Locale for date formatting (e.g., "en-US") | | timeZone | string | false | Time zone (e.g., "UTC") | | ageValidation | { minAge?: number, maxAge?: number } | false | Age validation rules for selecting dates (e.g., min/max age based on the selected date) |

Example

import React from 'react';
import {DynamicForm} from "react-dynamic-kit" 

export interface userFromSchema {
  firstName: string;
  middleName: string;
  lastName: string; 
  email: string;
  dob: string;
  gender: string;
  phoneNumber: string;
  address: [{
    addressLineOne: string;
    addressLineTwo: string;
    village: string;
    town: string;
    district: string;
    state: string;
    country: string;
    addressType: string;
  }];
}

const user = () => {
  const defaultValue: userFromSchema = {
    firstName: 'sharwan',
    middleName: '',
    lastName: '',
    email: '',
    dob: '',
    gender: '',
    phoneNumber: '',
    address: [{
      addressLineOne: '',
      addressLineTwo: '',
      village: '',
      town: '',
      district: '',
      state: '',
      country: '',
      addressType: ''
    }]
  };

  const handleFormSubmit = async (data: userFromSchema) => {
    console.log(data);
  };

  const AutocompleteOptionsSearch = async (searchTerm: string, fieldId: string) => {
    try {
      console.log(searchTerm+fieldId);
      const response  = [
        { label: 'The Shawshank Redemption', value: "1994" },
        { label: 'The Godfather', value: "1972" },
        { label: 'The Godfather: Part II', value: "1974" },
        { label: 'The Dark Knight', value: "2008" },
        { label: '12 Angry Men', value: "1957" },
        { label: "Schindler's List", value: "1993" },
        { label: 'Pulp Fiction', value: "1994" }
      ];
	  
      const result = await response;
      return result || []; 
    } catch (error) {
      console.error('Error fetching data:', error);
      return [];
    }
  };
  

  return (
    <div>
        <DynamicForm
          fields={userForm}
          formDefaultValue={defaultValue}
          onSubmit={handleFormSubmit}
          formViewMode={false}
          getAutocompleteOptions={AutocompleteOptionsSearch}
        />
    </div>
  );
};

export default user;

👉 Authors

• Sharwan Kumar (SK)