DEV Community: Pawan Bisht

React Form Toaster 2.0.9: What Changed and Why You Might Want to Try It

Pawan Bisht — Mon, 24 Aug 2026 10:48:15 +0000

If you've built a moderately complex form in React, you probably know how quickly the code grows.

Validation.
Conditional inputs.
Loading states.
Error messages.
Password toggles.
File inputs.
Repeatable fields.
Notifications.
Styling.

And eventually, the form component becomes much larger than the feature itself.

That's the problem React Form Toaster is designed to reduce.

With version 2.0.9, I've added and improved several capabilities that make schema-driven forms more practical for real applications.

🚀 Install React Form Toaster

You can get React Form Toaster from npm:

React Form Toaster on npm

npm install react-form-toaster

Then import it into your application:

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

What makes it different?

Instead of manually creating every field, you describe your form:

fields={[
  {
    name: "email",
    type: "email",
    label: "Email",
    placeholder: "Enter your email",
    required: true,
  },
]}

Validation can be handled through Zod:

const schema = z.object({
  email: z.string().email("Enter a valid email"),
});

And submission stays simple:

<Formbox
  schema={schema}
  fields={fields}
  onSubmit={async (data) => {
  console.log(data);
  }}
/>

For toast experiment you can try this!!

<Formbox
  schema={schema}
  fields={fields}
  toast = {{
    loading:"Processing data...",
    success:"Congratulation data saved🥂",
    error:"Found Some error!!",
    position:"bottom",
  }}
  onSubmit={async (data) => {
     await new Promise((resolve)=>{
     setTimeout(()=>console.log(data);resolve(),1500)
    })
  }}
/>

The interesting part of 2.0.9 is how much more control you have around that basic idea.

🎨 Styling: Tailwind + Inline CSS

You can now approach styling based on what you actually need.

For utility classes:

className="rounded-xl px-4 py-3 font-semibold"

For exact custom values:

style={{
  backgroundColor: "#12141c",
  border: "1px solid #252836",
  color: "#ffffff",
}}

You can also customize things such as:

labels
validation errors
buttons
inputs
focus states
password toggles
dropdowns
containers
required indicators

This gives you more control without having to fight the library when building a custom UI.

🔀 Conditional Fields

Dynamic forms are another important part of 2.0.9.

A field can depend on another field:

{
  name: "companyName",
  type: "text",
  label: "Company Name",
  showWhen: {
    field: "accountType",
    equals: "business",
  },
}

This lets you build forms where the UI changes according to the user's choices without manually maintaining a separate visibility state for every conditional input.

🔁 Repeatable Fields

Array fields are supported for scenarios where users need to add multiple values or groups of inputs.

This is useful for things like:

multiple addresses
team members
products
contact information
dynamic configuration

The goal is to keep these structures inside the schema instead of turning your component into a collection of state-management code.

🔔 Bring Your Own Toast Library

You don't have to use the built-in toast system.

Disable it:

<Formbox toast={false} />

Then use whatever notification solution your application already uses.

This keeps React Form Toaster focused on forms instead of forcing your entire application's notification architecture.

🌓 Inline or Modal

Need a form inside a page?

<Formbox mode="inline" />

Need a popup?

<Formbox mode="modal" />

Same library, different presentation.

🧠 Why I'm Building This

The idea behind React Form Toaster isn't to create another form library with hundreds of abstractions.

I'm trying to make a common workflow simpler:

Define → Validate → Render → Submit → Notify

without repeatedly rebuilding the same infrastructure.

There is still a lot I want to improve, and that's where community feedback becomes important.

📚 Documentation + Interactive Playground Coming Soon

One of the next major things I'm working on is a dedicated documentation website for React Form Toaster.

The README contains a lot of information, but I don't want developers to have to dig through a giant README to understand the library.

The new documentation site will make it easier to find:

installation
field types
validation examples
styling options
conditional fields
array fields
toast configuration
complete examples
API references

But there's something else I'm especially excited about:

🧪 An Interactive Playground

The documentation will include a playground where you can actually experiment with React Form Toaster.

Instead of only reading about the API, you'll be able to play with the form configuration, try different fields and options, see how the form behaves, and learn by experimenting.

I think this will make getting started with the library much easier.

Read → Try → Change → Learn.

The documentation website and playground are planned to be released in the next few days. 🚀

🤝 Contribute to React Form Toaster

React Form Toaster is an open-source project, and contributions are always welcome.

If you find a bug, have an idea, or want to improve the library, I'd genuinely love to hear from you.

You can contribute by:

🐛 Reporting bugs
💡 Suggesting features
🔧 Opening pull requests
📖 Improving documentation
🧪 Testing new features
⭐ Sharing the project with other React developers

You can find the project and contribute on GitHub:

React Form Toaster on GitHub

You can also find me on GitHub:

277pawan

If you have an idea for improving the library, don't hesitate to open an issue or start a discussion.

❤️ Back the Project

Open-source software takes time to build, maintain, document, and improve.

If React Form Toaster has saved you development time or helped you build something, you can support the project by backing my work.

Your support helps me spend more time on:

🚀 New features
🐛 Bug fixes
📚 Better documentation
🧪 Testing and improvements
🧪 Improving the interactive playground
🌐 The upcoming documentation website
🔮 Future versions of React Form Toaster

If you'd like to support the project financially, you can use the GitHub Sponsors option on my profile.

Every contribution — whether it's a sponsorship, a ⭐ star, a bug report, a pull request, or simply sharing the project — means a lot.

Final Thoughts

React Form Toaster 2.0.9 is another step toward making complex React forms easier to build without sacrificing customization.

If you're working on a React project with dynamic forms, give it a try.

📦 Get React Form Toaster on npm

💻 Explore the source code on GitHub

👤 Follow me on GitHub

If something doesn't work the way you'd expect, let me know. Open an issue, suggest an improvement, or contribute a fix.

And if you like the idea behind the project, give the repository a ⭐ — it genuinely helps the project.

2.0.9 is out. Documentation + Playground are coming next. 🚀

Thanks for checking out React Form Toaster and supporting open source. ❤️

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

Pawan Bisht — Thu, 23 Apr 2026 05:12:54 +0000

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

React Form Toaster 1.0.0

Pawan Bisht — Mon, 28 Apr 2025 07:51:18 +0000

React-Form-Toaster

🎊 React-Form-Toaster is a powerful and flexible library designed for creating dynamic forms in React with ease. Users can quickly generate complex forms by simply defining input types, buttons, and other elements, without needing to create each element separately.

$ npm install --save react-form-toaster
$ yarn add react-form-toaster

Features

Easy Setup: Get started in less than 10 seconds! Quickly integrate and begin creating dynamic forms without hassle.😎
Dynamic Form Creation: Simply define the type of fields, labels, form title, and required attributes, and the library handles the rest.
Highly Customizable: Customize every aspect of your form, including classes, messages, and more, to fit your specific needs.
TypeScript Support: Built with TypeScript, ensuring strong typing and safer code development.🤯
Tailwind CSS Integration: Optimized for Tailwind CSS, allowing for efficient and modern styling right out of the box.
Default Form UI: Comes with a beautifully designed default form UI that you can use as-is or customize further to match your design requirements.
Form Validation and Error Handling: Easily define required fields and validate user input with built-in error handling and custom validation functions.🍃
Responsive Design: Fully responsive, making it easy to create forms that look great on any device.
Animation and Effects: Easily apply animations, such as click outside the box to close the form.
Fully Customizable Forms: Provides the flexibility to design forms with custom classes and styles, ensuring they match your application's theme.😱

Quick Setup

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Note: It is important to import index.css after App.tsx to ensure that all styles are correctly applied. This ensures that any global styles are loaded after the component has been imported.

User-Forms

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/dist/tailwind.css";
<Formbox
  formtoogle={setfirstform}
  formtitle={[
    {
      title: "Form-Builder",
      className: ["text-2xl font-bold "],
    },
  ]}
  textfield={[
    {
      name: "firstname",
      placeholder: "Enter your Firstname",
      label: "FirstName",
      required: false,
      // type: "text"
    },
    {
      name: "age",
      placeholder: "Enter your age",
      label: "Age",
      type: "number",
    },
  ]}
  buttons={[
    {
      name: "Submit",
      type: "submit",
      label: "Submitbutton",
      function: handlesubmit,
    },
    {
      name: "Reset",
      type: "reset",
      label: "Submitbutton",
      function: handlesubmit,
    },
  ]}
/>;

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

Confirmation-Forms

 <Formbox
 formtoogle={setsecondform}
 formtitle={[{
 title: "Confirmation-Form",
 }]}
 message={[{
 message: "This is very important file Are you sure want to delete this file? Please reconfirm it!"
 }]}
 buttons={[{
 name: "Ok",
 label: "Confirm",
 type: "ok",
 function: () => handleConfirm(true),
 className: ["bg-red-600"]
 },{
 name: "Cancel",
 label: "Cancel",
 type: "cancel",
 function: () => handleConfirm(false),
 className: ["text-red-600 border-1 border-red-600 bg-gray-100 hover:border-red-600 "]
 }]}
 />

const handleConfirm = (confirm: boolean) => {
  console.log(confirm, productId);
  if (confirm && productId) {
    console.log(" We got both of them. Hurrah! 🏆 ");
  }
  setsecondform(false);
};

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
You can also find me on Github 277pawan.

License

MIT

Free Library, Happy Coding😎😎!

REACT FORM TOASTER (1.1.1).

Pawan Bisht — Wed, 04 Sep 2024 17:06:46 +0000

React-Form-Toaster (1.1.1)

https://cure-ten.vercel.app/static/media/ezgif.com-video-to-gif-converter.01200ebb8d2078e8d60e.gif

$ npm install --save react-form-toaster
$ yarn add react-form-toaster

Features

Easy Setup: Get started in less than 10 seconds! Quickly integrate and begin creating dynamic forms without hassle.😎
Dynamic Form Creation: Simply define the type of fields, labels, form title, and required attributes, and the library handles the rest.
Highly Customizable: Customize every aspect of your form, including classes, messages, and more, to fit your specific needs.
TypeScript Support: Built with TypeScript, ensuring strong typing and safer code development.🤯
Tailwind CSS Integration: Optimized for Tailwind CSS, allowing for efficient and modern styling right out of the box.
Default Form UI: Comes with a beautifully designed default form UI that you can use as-is or customize further to match your design requirements.
Form Validation and Error Handling: Easily define required fields and validate user input with built-in error handling and custom validation functions.🍃
Responsive Design: Fully responsive, making it easy to create forms that look great on any device.
Zod Validation: Easily apply Zod validation in your Form🔐.
Fully Customizable Forms: Provides the flexibility to design forms with custom classes and styles, ensuring they match your application's theme.😱

Quick Setup

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Note: It is important to import index.css after App.tsx to ensure that all styles are correctly applied. This ensures that any global styles are loaded after the component has been imported.

User-Forms

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/dist/tailwind.css";
<Formbox
  formtoogle={setfirstform}
  formtitle={[
    {
      title: "Form-Builder",
      className: ["text-2xl font-bold "],
    },
  ]}
  textfield={[
    {
      name: "firstname",
      placeholder: "Enter your Firstname",
      label: "FirstName",
      required: false,
      // type: "text"
    },
    {
      name: "age",
      placeholder: "Enter your age",
      label: "Age",
      type: "number",
    },
  ]}
  buttons={[
    {
      name: "Submit",
      type: "submit",
      label: "Submitbutton",
      function: handlesubmit,
    },
    {
      name: "Reset",
      type: "reset",
      label: "Submitbutton",
      function: handlesubmit,
    },
  ]}
  validationSchema={validationSchema}
/>;

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

Zod Validation

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" }),
});

Confirmation-Forms

 <Formbox
 formtoogle={setsecondform}
 formtitle={[{
 title: "Confirmation-Form",
 }]}
 message={[{
 message: "This is very important file Are you sure want to delete this file? Please reconfirm it!"
 }]}
 buttons={[{
 name: "Ok",
 label: "Confirm",
 type: "ok",
 function: () => handleConfirm(true),
 className: ["bg-red-600"]
 },{
 name: "Cancel",
 label: "Cancel",
 type: "cancel",
 function: () => handleConfirm(false,200),
 className: ["text-red-600 border-1 border-red-600 bg-gray-100 hover:border-red-600 "]
 }]}
 />

const handleConfirm = (confirm: boolean, productId: number) => {
  console.log(confirm, productId);
  if (confirm && productId) {
    console.log(" We got both of them. Hurrah! 🏆 ");
  }
  setsecondform(false);
};

Component Attributes

The following tables detail all available attributes for each component in React-Form-Toaster:

Formbox Component Attributes

Attribute	Type	Description	Required
`className`	string[]	Custom classes for the form container	No
`formtoogle`	Function	Function to toggle form visibility	Yes
`formtitle`	Object[]	Form title configuration	No
`textfield`	Object[]	Text input field configurations	No
`buttons`	Object[]	Button configurations	No
`message`	Object[]	Message configurations for confirmation forms	No
`validationSchema`	Object	Zod validation schema	No

TextField Component Attributes

Attribute	Type	Description	Example
`name`	string	Input field name	"firstname"
`placeholder`	string	Placeholder text	"Enter your Firstname..."
`label`	string	Label text	"FirstName"
`type`	string	Input type (text, number, file, etc.)	"number"
`required`	boolean	Whether field is required	true
`arialabel`	string	Accessibility label	"FileUpload"

File Upload Specific Attributes

Attribute	Type	Description	Example
`number`	number	Maximum number of files	5
`preview`	string	Preview type ("image")	"image"
`previewClassName`	string[]	Classes for preview element	["h-32 w-32"]
`icon`	JSX.Element	Icon for removing files	`<RiCloseLargeLine />`

Button Component Attributes

Attribute	Type	Description	Example
`name`	string	Button text	"Submit"
`type`	string	Button type (submit, reset, ok, cancel)	"submit"
`label`	string	ARIA label	"Submitbutton"
`function`	Function	Click handler	handlesubmit
`className`	string[]	Custom classes	["bg-red-600"]
`arialabel`	string	Accessibility label	"Submit_button"
`tooltip`	string	Tooltip text	"Submit Form"

Loader Component Attributes

Attribute	Type	Description	Example
`loader`	boolean	Whether to show loader	true
`className`	string[]	Loader custom classes	["border-red-500"]

Message Component Attributes

Attribute	Type	Description	Example
`message`	string	Message text	"Are you sure want to delete this file?"
`className`	string[]	Custom classes	["text-gray-700"]

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.
You can also find me on Github 277pawan.

Free Library, Happy Coding😎😎!

DEV Community: Pawan Bisht

React Form Toaster 2.0.9: What Changed and Why You Might Want to Try It

🚀 Install React Form Toaster

What makes it different?

🎨 Styling: Tailwind + Inline CSS

🔀 Conditional Fields

🔁 Repeatable Fields

🔔 Bring Your Own Toast Library

🌓 Inline or Modal

🧠 Why I'm Building This

📚 Documentation + Interactive Playground Coming Soon

🧪 An Interactive Playground

🤝 Contribute to React Form Toaster

❤️ Back the Project

Final Thoughts

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

🚀 React-Form-Toaster 1.1.3

🔥 What's New in 1.1.3?

⚙️ Quick Installation

🧩 How to Use It

1. Import and Setup

2. Basic User Form Example

3. Submit Handler

4. Zod Validation Schema

🔍 Overview of Main Component Props

Formbox Component

TextField Options

File Upload Support

Buttons

🙌 Join the Community

React Form Toaster 1.0.0

React-Form-Toaster

Features

Quick Setup

User-Forms

Confirmation-Forms

Contribute

License

REACT FORM TOASTER (1.1.1).

React-Form-Toaster (1.1.1)

Features

Quick Setup

User-Forms

Zod Validation

Confirmation-Forms

Component Attributes

Formbox Component Attributes

TextField Component Attributes

File Upload Specific Attributes

Button Component Attributes

Loader Component Attributes

Message Component Attributes

Contribute

`Formbox` Component

`TextField` Options