@edwin9876/react-rhf-builder

@edwin9876/react-rhf-builder is a React library for building dynamic forms quickly and efficiently using react-hook-form, styled with Tailwind CSS and DaisyUI. This library allows developers to define form elements through an array of configuration objects, enabling seamless generation of styled and functional forms.

---

Features

• Dynamic Field Rendering: Generate multiple form fields with minimal configuration.
• Built-in Validation: Leverage react-hook-form for managing form state and validation.
• Tailwind CSS & DaisyUI Integration: Beautiful, pre-styled components with customization options.
• Flexible Layout: Configure the layout and structure of form sections easily.
• Customizable Top and Bottom Components: Add extra UI elements (headers, footers, etc.) to your form sections.

---

Installation

Install the package using npm or yarn:

npm install @edwin9876/react-rhf-builder

or

yarn add @edwin9876/react-rhf-builder

---

Basic Usage

Here’s how you can use @edwin9876/react-rhf-builder to create a form dynamically:

Example: Simple Form

import React from "react";
import { DynamicFormSection, useForm } from "@edwin9876/react-rhf-builder";

const fields = [
  { type: "text", id: "name", label: "Name" },
  { type: "input", id: "email", label: "Email" },
  { type: "checkbox", id: "subscribe", label: "Subscribe to Newsletter" },
  {
    type: "select",
    id: "role",
    label: "Role",
    fieldProps: {
      options: [
        { label: "Admin", value: "admin" },
        { label: "User", value: "user" },
      ],
    },
  },
];

const App = () => {
  const methods = useForm();

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

  return (
    <DynamicFormSection
      methods={methods}
      fields={fields}
      onSubmit={handleSubmit}
      wrapperProps={{ className: "grid grid-cols-1 gap-4" }}
      topComponent={<h1 className="text-2xl font-bold">Register</h1>}
      bottomComponent={
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      }
    />
  );
};

export default App;

---

Example: Custom Layout

import React from "react";
import { DynamicFormSection, useForm } from "@edwin9876/react-rhf-builder";

const fields = [
  { type: "input", id: "firstName", label: "First Name" },
  { type: "input", id: "lastName", label: "Last Name" },
];

const App = () => {
  const methods = useForm();

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

  return (
    <DynamicFormSection
      methods={methods}
      fields={fields}
      wrapperProps={{ className: "grid grid-cols-2 gap-4" }}
      onSubmit={handleSubmit}
      bottomComponent={
        <button type="submit" className="btn btn-primary col-span-2">
          Save
        </button>
      }
    />
  );
};

export default App;

---

Props

fields (Optional)

An array of objects that defines the form fields. Each object supports the following:

Key	Type	Description
type	string	The type of the form element (e.g., input, text, checkbox, select).
id	string	Unique identifier for the form element.
label	string	Label displayed for the form element.
fieldProps	object	Additional props specific to the form element (e.g., options for a select).

---

methods (Required)

An instance of UseFormReturn from react-hook-form, imported from the library.

Example:

const methods = useForm();

---

formProps (Optional)

Props passed to the underlying <form> element. Useful for additional attributes like id or className.

---

wrapperProps (Optional)

Props passed to the wrapper <div> element, allowing layout customization.

Example:

wrapperProps={{ className: "grid grid-cols-2 gap-4" }}

---

topComponent and bottomComponent (Optional)

• topComponent: A ReactNode rendered at the top of the form section.
• bottomComponent: A ReactNode rendered at the bottom of the form section.

---

onSubmit and onError (Optional)

• onSubmit: Callback function triggered when the form is successfully submitted.
• onError: Callback function triggered when there are validation errors.

---

Styling

To style your forms, ensure Tailwind CSS and DaisyUI are installed and configured:

Install Tailwind CSS:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init

Install DaisyUI:

npm install daisyui

Update tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

---

Contributing

Contributions are welcome! Please open an issue or submit a pull request to improve the library.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.