@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.