DEV Community

Pawan Bisht
Pawan Bisht

Posted on

🚀 React-Form-Toaster 1.1.3 is here. Build powerful forms in React/Next.js with ease, flexibility, and clean UX baked right in.

#webdev #javascript #ai #react

🚀 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
Enter fullscreen mode Exit fullscreen mode

🧩 How to Use It

1. Import and Setup 

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/dist/tailwind.css";
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

3. Submit Handler 

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

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" })
});
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)