React Dynamic Hook Form

React Dynamic Hook Form is a flexible and dynamic form generator built using react-hook-form. It allows you to easily create forms based on a JSON schema, ensuring quick and consistent UI development.

Features

• Dynamic Field Rendering: Automatically generate form fields based on a provided schema.
• Validation Support: Integrates seamlessly with react-hook-form validation rules.
• Customizable Field Types: Supports various field types like text, email, password, select, and checkbox.
• Error Handling: Displays error messages for fields with invalid inputs.
• Lightweight and Performant: Built on react-hook-form for optimal performance.

Installation

Install the package using npm:

npm install react-dynamic-hook-form

or using yarn:

yarn add react-dynamic-hook-form

Basic Example
Here's an example of how to use the FormGenerator component:

import React from "react";
import { FormGenerator } from "react-dynamic-hook-form";

const App = () => {
  const schema = [
    {
      name: "username",
      label: "Username",
      type: "text",
      validation: { required: "Username is required" },
    },
    {
      name: "email",
      label: "Email",
      type: "email",
      validation: { required: "Email is required" },
    },
    {
      name: "password",
      label: "Password",
      type: "password",
      validation: { required: "Password is required" },
    },
    {
      name: "gender",
      label: "Gender",
      type: "select",
      options: [
        { label: "Male", value: "male" },
        { label: "Female", value: "female" },
      ],
      validation: { required: "Please select your gender" },
    },
    {
      name: "agreeToTerms",
      label: "I agree to the terms and conditions",
      type: "checkbox",
      validation: { required: "You must agree to continue" },
    },
  ];

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

  return <FormGenerator schema={schema} onSubmit={handleSubmit} />;
};

export default App;
Schema Format
Each field in the schema should follow this structure:

{
  name: "fieldName", // Field name (string, required)
  label: "Field Label", // Field label (string, required)
  type: "text" | "email" | "password" | "select" | "checkbox", // Field type (string, required)
  validation: {
    required: "This field is required", // Validation rules from react-hook-form
  },
  options: [
    // Only for select fields
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
  ],
}
Props
Prop Name	Type	Description
schema	Array	Array of field definitions. See schema format above.
onSubmit	Function	Callback function to handle form submission.
License
This project is licensed under the MIT License.

Support
For any issues, suggestions, or contributions, feel free to reach out via email:

📧 [e-mail]