DynamicForm Component

This DynamicForm component is a reusable form solution for Next.js applications, built with react-hook-form and Tailwind CSS. It supports various input types, including text, textarea, file uploads, and select dropdowns, with built-in sanitization and accessibility features.

Features

1. Dynamic Field Configuration:

• Accepts an array of field configurations (fields) to render different input types dynamically.
• Supports text, textarea, file, and select input types.
• Allows setting labels, required status, placeholders, max lengths, and select options.

2. Form State Management with react-hook-form:

• Utilizes react-hook-form for efficient form state management and validation
• Provides controlled inputs with automatic value tracking and validation.
• Handles form submission with sanitized data.

3. Input Sanitization:

   •  Automatically sanitizes text inputs and textareas by removing extra spaces and trimming leading/trailing spaces.
     

   •  Ensures data consistency and prevents unexpected input issues.
     

4. Validation:

   •  Supports required and max length validations based on field configurations.
     

   •  Displays validation error messages below each field.
     

   • onTouched mode for validation.

• Server-Side Error Handling:

  •  Accepts external errors (`errors`) from the server and displays them alongside client-side validation errors.
    

  •  Synchronizes server-side errors with form state using `useEffect`.
    

• Loading and Submission States:

  •  Disables the form during submission or loading (`isLoading`, `isSubmitting`).
    

  •  Displays a "Submitting..." message on the submit button.
    

• Accessibility:

  •  Includes accessibility attributes (e.g., `aria-label`, `aria-required`, `aria-describedby`, `aria-invalid`, `aria-busy`).
    

  •  Provides error message association with input fields.
    

  • Focuses on the first error field after submission fails.
• Customizable UI with Tailwind CSS:

  •  Styled with Tailwind CSS for consistent and responsive design.
    

  •  Provides a clean and modern form layout.
    

• Initial Values:
  • Supports initialValues prop to pre-populate the form.
• Extra Content:
  • Allows adding extra content below the form with the extraContent prop.

Usage

import { DynamicForm } from './components/common/DynamicForm';

const MyForm = ({ onSubmit, errors, isLoading }) => {
  const fields = [
    { name: 'name', label: 'Name', type: 'text', required: true, maxLength: 50 },
    { name: 'email', label: 'Email', type: 'text', required: true },
    { name: 'message', label: 'Message', type: 'textarea', placeholder: 'Enter your message', maxLength: 500 },
    { name: 'file', label: 'Upload File', type: 'file', accept: '.pdf,.doc' },
    { name: 'category', label: 'Category', type: 'select', options: [
      { value: 'option1', label: 'Option 1' },
      { value: 'option2', label: 'Option 2' },
      { value: 'option3', label: 'Option 3' },
    ], required: true },
  ];

  const handleSubmit = async (data) => {
    await onSubmit(data);
  };

  return (
    <DynamicForm
      fields={fields}
      onSubmit={handleSubmit}
      buttonText="Submit Form"
      errors={errors}
      isLoading={isLoading}
      initialValues={{ name: 'John Doe', email: '[email address removed]' }}
    />
  );
};

export default MyForm;