Dynamic Form Generator

Dynamic Form Generator is a React-based package for dynamically generating forms using a JSON schema. It integrates form validation using Zod and offers customization options for developers to define their fields, validation rules, and styles. The package comes with default TailwindCSS styling, but this can be easily overridden to match custom design needs.

Features

• Dynamic Form Generation: Define forms with any combination of fields in a JSON schema, and the form will be rendered dynamically.
• Zod Validation: Built-in validation powered by Zod, ensuring that your forms are validated both on the client side and with highly customizable validation rules.
• Customizable: Default styling is provided with TailwindCSS, but developers can override and apply their custom styles easily.
• Supports Different Field Types: Text, email, password, select, and more.
• Error Display: Automatic error display below fields on validation failure.

Installation

To install the package, use the following command:

npm i dynamic-form-generator-o

or with Yarn:

yarn add dynamic-form-generator-o

Usage

1. Basic Example

Here's a simple example of how to use the package with default settings:

import React from 'react';
import DynamicFormGenerator from 'dynamic-form-generator-o';

const App = () => {
   const onSubmit = (data: Partial<FormData>) => {
      console.log('Form Data:', data);
   };

   return (
      <div>
         <DynamicFormGenerator onSubmit={onSubmit} />
      </div>
   );
};

export default App;

2. Customizing Form Fields and Styles.

You can provide a custom form schema and styles as props:

import React from 'react';
import DynamicFormGenerator from 'dynamic-form-generator-o';

const customSchema = {
   title: 'Custom Registration Form',
         fields: [
         {
            name: 'username',
            type: 'text' as const,
            label: 'Username',
            placeholder: 'Enter your username',
            validation: { required: true, minLength: 6 },
         },
         {
            name: 'email',
            type: 'email' as const,
            label: 'Email',
            placeholder: 'Enter your email',
            validation: { required: true },
         },
         {
            name: 'password',
            type: 'password' as const,
            label: 'Password',
            placeholder: 'Enter your password',
            validation: { required: true, minLength: 8 },
         },
         {
            name: 'age',
            type: 'number' as const,
            label: 'Age',
            placeholder: 'Enter your age',
            validation: {
               required: false,
               minLength: 2,
            },
         },
         {
            name: 'Sex',
            type: 'select' as const,
            label: 'Sex',
            options: ['male', 'female'],
            placeholder: 'Select your gender',
            validation: { required: true, minLength: 6 },
         },
         {
            name: 'Date',
            type: 'date' as const,
            label: 'Date',
            placeholder: 'Enter Date',
            validation: { required: true, minLength: 6 },
         },
      ],
};

const customStyles = {
   title: 'text-xl text-red-600 font-bold mb-6 text-center',
   formWrapper: 'max-w-2xl mx-auto p-6 shadow-md',
   input: 'w-full p-2 border rounded-md',
   select: 'w-full p-2 border rounded-md',
   label: 'block mb-2 text-sm font-medium text-gray-700',
   errorText: 'text-red-500 text-xs mt-1',
   submitButton:
      'w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600',
};

const onSubmit = (data: Partial<FormData>) => {
   console.log('Form Data:', data);
};

const App = () => {
   return (
      <div>
         <DynamicFormWithProps
            formSchema={customSchema}
            styles={customStyles}
            onSubmit={onSubmit}
            buttonText="Register"
         />
      </div>
   );
};

export default App;

Validation

Form validation is powered by Zod, and the schema is automatically generated from your form fields' validation rules. You can customize field validation rules with the validation key in the schema.

{
  name: 'email',
  type: 'email'  as const,
  label: 'Email',
  validation: {
    required: true,
    pattern: '[a-zA-Z0-9]+@[a-zA-Z0-9]+\\.[a-zA-Z]{2,}'
  }
}

Available Field Types

• text: Basic input field for text.
• email: Email input with validation.
• password: Password field.
• select: Dropdown selection with custom options.

Styling

By default, the form uses TailwindCSS classes for layout and styling. However, you can override these styles by passing a styles object to the DynamicFormGenerator component.

You can replace these classes with your own custom styles as shown in the "Customizing Form Fields and Styles" section.

API

DynamicFormGenerator

| Property | Type | Default | Description | | ---------- | -------- | -------------------------- | ---------------------------------------------------------------------- | | formSchema | object | Default form schema | Object defining the form fields, labels, and validation rules. | | styles | object | Default TailwindCSS styles | Object to override default styles with custom CSS or Tailwind classes. | | onSubmit | function | Required | Function to handle form submission. | | buttonText | string | 'Submit' | Text displayed on the submit button. |

Default Style Classes

| Class Name | Purpose | | ------------ | ------------------------------------- | | formWrapper | Container that wraps the entire form. | | title | Class for form title. | | input | Class for all input fields. | | select | Class for dropdown (select) fields. | | label | Class for field labels. | | errorText | Class for error messages. | | submitButton | Class for the submit button. |

Props

• schema - The JSON schema that defines the fields and validation rules. Example:

const formSchema = {
   title: 'User Registration',
   fields: [
      {
         name: 'username',
         type: 'text '  as const,
         label: 'Username',
         validation: { required: true, minLength: 3 },
      },
      {
         name: 'email',
         type: 'email'  as const,
         label: 'Email',
         validation: { required: true },
      },
   ],
};

• onSubmit - A callback function that gets called when the form is submitted successfully with validated data. - Example:

const handleSubmit = (data) => {
   console.log('Form Data:', data);
};

• styles (optional) - Custom styles for fields and buttons. Example:

const styles = {
   input: 'border p-2 rounded',
   button: 'bg-blue-500 text-white',
   error: 'text-red-500',
};

Customization

Developers can easily override the default styles or add new field types by extending the schema and providing custom form elements.

Example of adding new field types:

const formSchema = {
   title: 'Event Registration',
   fields: [
      {
         name: 'eventDate',
         type: 'date'  as const,
         label: 'Event Date',
         validation: {
            required: true,
         },
      },
   ],
};

License

This package is MIT licensed.

Contribution

Contributions are welcome! If you find any bugs or have feature requests, please feel free to open an issue or submit a pull request on the GitHub repository.

Author

Developed by onah.