DEV Community

Cover image for React Form Toaster 2.0.9: What Changed and Why You Might Want to Try It
Pawan Bisht
Pawan Bisht

Posted on

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

#webdev #react #ai #javascript

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

Then import it into your application:

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

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

Validation can be handled through Zod:

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

And submission stays simple:

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

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

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

For exact custom values:

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

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

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

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

Need a popup?

<Formbox mode="modal" />
Enter fullscreen mode Exit fullscreen mode

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. ❤️

Top comments (0)