🚀 React-Form-Toaster 1.1.3 is here. Build powerful forms ...

🚀 React-Form-Toaster 1.1.3

Now faster, smarter, and more customizable than ever. Build powerful forms in React/Next.js with ease, flexibility, and clean UX baked right in.

Say hello to the latest version of React-Form-Toaster (1.1.3)! 🎉

We've made it even easier, faster, and more powerful with much stability to create dynamic forms in React — without writing repetitive code. Whether you're building a signup form, feedback tool, or a confirmation popup, this library has you covered.

🔥 What's New in 1.1.3?

File Upload — More keys for better file upload with new validation!
Password Toggle — Beautiful default UI with full customization; use any icon library by just declaring it (Show & Hide).
Confirmation Modals — Easy-to-integrate confirmation messages with flexible buttons.
Radio & Checkbox — Checkbox for multiselect and radio support too.
Super Fast Setup — Just plug, play, and render your form!

⚙️ Quick Installation

Use npm or yarn to install:

npm install --save react-form-toaster
# or
yarn add react-form-toaster

🧩 How to Use It

1. Import and Setup

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/dist/tailwind.css";

2. Basic User Form Example

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/dist/tailwind.css";

<Formbox
  className={[
    "bg-gray-200 border-1 max-w-xl border-gray-100 rounded-lg shadow-md",
  ]}
  formtoogle={setfirstform}
  validationSchema={validationSchema}
  formtitle={[
    {
      title: "Form-Builder",
      className: ["text-2xl font-bold text-black "],
    },
  ]}
  textfield={[
    {
      name: "firstname",
      placeholder: "Enter your Firstname...",
      label: "FirstName",
      required: true,
      type: "text",
    },
    {
      name: "password",
      placeholder: "Enter your password...",
      label: "Password",
      type: "password",
      required: true,
      passwordToggle: true,
      icon: { show: Eye, hide: EyeOff },
    },
    {
      name: "search",
      placeholder: "Search your profession...",
      label: "Search",
      type: "search",
    },
    {
      name: "age",
      placeholder: "Enter your age...",
      label: "Age",
      type: "number",
      required: true,
    },
    {
      name: "marritalStatus?",
      label: "Marital Status",
      type: "checkbox",
      checklimit: 1,
      required: true,
      options: [
        { label: "Married", value: "married" },
        { label: "Unmarried", value: "unmarried" },
        { label: "other", value: "other" },
      ],
    },
    {
      name: "file",
      placeholder: "Upload your Image",
      label: "File",
      type: "file",
      arialabel: "File",
      maxFiles: 2,
      selectlabel: "Select File pdf or image",
      accept: ".pdf, image/*",
      className: [
        "border-2 border-dotted border-gray-400 p-2 rounded-lg bg-gray-100",
      ],
    },
  ]}
  buttons={[
    {
      name: "Reset Button",
      type: "reset",
      arialabel: "reset_button",
      tooltip: "Reset Button",
    },
    {
      name: "Submit",
      type: "submit",
      arialabel: "Submit_button",
      tooltip: "Submit Button",
      function: handlesubmit,
      loader: {
        loader: loader,
      },
    },
  ]}
  validationSchema={validationSchema}
/>

3. Submit Handler

const handlesubmit = (data: any, e: React.MouseEvent) => {
  e.preventDefault();
  console.log(data);
};

4. Zod Validation Schema

const validationSchema = z.object({
  firstname: z.string().min(4, { message: "First name must be at least 4 characters" }),
  age: z.number().min(18, { message: "You must be at least 18 years old" })
});

🔍 Overview of Main Component Props

`Formbox` Component

Prop	Description
`formtoogle`	Toggle function for form visibility
`formtitle`	Title array for form headings
`textfield`	Array of input field definitions
`buttons`	Submit, reset, or custom button configurations
`message`	Message block for confirmation dialogs
`validationSchema`	Zod schema for validation
`className`	Custom styles for layout and design

`TextField` Options

name, placeholder, label, type, required, arialabel, passwordToggle, icon, checklimit, options

File Upload Support

Add number, accept, selectlabel, className, maxFiles, and arialabel for custom file uploads.

Buttons

Add number, type, label, function, className, arialabel, tooltip, loader.

Control labels, click behavior, classes, and accessibility with full flexibility.

🙌 Join the Community

If you found this helpful, consider giving the GitHub repo a ⭐!

Contributions are always welcome — feel free to open issues, suggest improvements, or share your feedback to help make it even better.

推荐订阅源

DEV Community