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:

1npm install dynamic-form-generator
2

or with Yarn:

1yarn add dynamic-form-generator
2

Usage

1. Basic Example

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

1import React from 'react';
2import DynamicFormGenerator from 'dynamic-form-generator';
3
4const App = () => {
5   const onSubmit = (data: Partial<FormData>) => {
6      console.log('Form Data:', data);
7   };
8
9   return (
10      <div>
11         <DynamicFormGenerator onSubmit={onSubmit} />
12      </div>
13   );
14};
15
16export default App;

2. Customizing Form Fields and Styles.

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

1import React from 'react';
2import DynamicFormGenerator from 'dynamic-form-generator';
3
4const customSchema = {
5   title: 'Custom Registration Form',
6         fields: [
7         {
8            name: 'username',
9            type: 'text' as const,
10            label: 'Username',
11            placeholder: 'Enter your username',
12            validation: { required: true, minLength: 6 },
13         },
14         {
15            name: 'email',
16            type: 'email' as const,
17            label: 'Email',
18            placeholder: 'Enter your email',
19            validation: { required: true },
20         },
21         {
22            name: 'password',
23            type: 'password' as const,
24            label: 'Password',
25            placeholder: 'Enter your password',
26            validation: { required: true, minLength: 8 },
27         },
28         {
29            name: 'age',
30            type: 'number' as const,
31            label: 'Age',
32            placeholder: 'Enter your age',
33            validation: {
34               required: false,
35               minLength: 2,
36            },
37         },
38         {
39            name: 'Sex',
40            type: 'select' as const,
41            label: 'Sex',
42            options: ['male', 'female'],
43            placeholder: 'Select your gender',
44            validation: { required: true, minLength: 6 },
45         },
46         {
47            name: 'Date',
48            type: 'date' as const,
49            label: 'Date',
50            placeholder: 'Enter Date',
51            validation: { required: true, minLength: 6 },
52         },
53      ],
54};
55
56const customStyles = {
57   title: 'text-xl text-red-600 font-bold mb-6 text-center',
58   formWrapper: 'max-w-2xl mx-auto p-6 shadow-md',
59   input: 'w-full p-2 border rounded-md',
60   select: 'w-full p-2 border rounded-md',
61   label: 'block mb-2 text-sm font-medium text-gray-700',
62   errorText: 'text-red-500 text-xs mt-1',
63   submitButton:
64      'w-full bg-green-500 text-white py-2 rounded-md hover:bg-green-600',
65};
66
67const onSubmit = (data: Partial<FormData>) => {
68   console.log('Form Data:', data);
69};
70
71const App = () => {
72   return (
73      <div>
74         <DynamicFormWithProps
75            formSchema={customSchema}
76            styles={customStyles}
77            onSubmit={onSubmit}
78            buttonText="Register"
79         />
80      </div>
81   );
82};
83
84export 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.

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

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:

1const formSchema = {
2   title: 'User Registration',
3   fields: [
4      {
5         name: 'username',
6         type: 'text '  as const,
7         label: 'Username',
8         validation: { required: true, minLength: 3 },
9      },
10      {
11         name: 'email',
12         type: 'email'  as const,
13         label: 'Email',
14         validation: { required: true },
15      },
16   ],
17};

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

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

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

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

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:

1const formSchema = {
2   title: 'Event Registration',
3   fields: [
4      {
5         name: 'eventDate',
6         type: 'date'  as const,
7         label: 'Event Date',
8         validation: {
9            required: true,
10         },
11      },
12   ],
13};

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.