Projects

React-Form-Toaster

Schema-driven forms for React

Pass one JSON-like schema for fields, buttons, validation, and styling — the library handles layout, state, errors, password toggles, file uploads, and toasts automatically.

• 2.0.10 Version
• 100% Schema driven
• Modal + inline Modes
• Zod Validation

Install & setup

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

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

Key strengths

• 100% schema & JSON driven — fields, buttons, validation, styling
• Zero boilerplate — no repetitive hooks per input
• Granular styling via className (Tailwind) and inline style
• TypeScript & Zod integration
• Modal & inline modes
• Flexible toasts — built-in or toast={false} for your library
• Array & conditional fields — showWhen visibility

Styling: className vs style

Shipped Tailwind utilities work in className on fields, buttons, titles, and containers. Use style for arbitrary values (custom hex). When both set the same property, inline style wins.

className="bg-pink-600 text-white rounded-xl px-4 py-3"
style={{ backgroundColor: "#6366f1", color: "#ffffff" }}

Account form example

import Formbox from "react-form-toaster";
import "react-form-toaster/dist/index.css";
import { z } from "zod";

const schema = z.object({
  firstName: z.string().min(1, "First name is required"),
  email: z.string().email(),
  accountType: z.enum(["personal", "business"]),
  companyName: z.string().optional(),
  password: z.string().min(8),
});

export function AccountForm() {
  return (
    <Formbox
      mode="inline"
      schema={schema}
      onSubmit={async (data) => {
        await new Promise((r) => setTimeout(r, 1500));
        console.log(data);
      }}
      toast={{
        loading: "Creating account...",
        success: "Account created!",
        error: "Something went wrong",
        position: "bottom-right",
      }}
      fields={[
        { name: "firstName", type: "text", label: "First Name", required: true },
        { name: "email", type: "email", label: "Email", required: true },
        {
          name: "accountType",
          type: "select",
          label: "Account Type",
          options: [
            { label: "Personal", value: "personal" },
            { label: "Business", value: "business" },
          ],
        },
        {
          name: "companyName",
          type: "text",
          label: "Company",
          showWhen: { field: "accountType", equals: "business" },
        },
        {
          name: "password",
          type: "password",
          label: "Password",
          passwordToggle: true,
          required: true,
        },
      ]}
      buttons={[
        {
          name: "Create Account",
          type: "submit",
          loadingText: "Creating...",
          style: { backgroundColor: "#6366f1", color: "#fff" },
        },
      ]}
    />
  );
}

Confirmation / destructive flows

Same schema approach for delete-account, remove resource, reset data — type DELETE to confirm, modal mode, red submit button.

Walkthrough video

Live documentation API reference, configuration, validation, styling guides, and interactive demos.