React-Form-Toaster 1.1.2

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.
• 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
            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}
          />
        ) : (
          ""
        )}

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
loader	boolean	Whether to show loader on submit	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"
accept	string	Accepted file types (for file input)	".pdf, image/*"
maxFiles	number	Maximum number of files (for file input)	5
selectlabel	string	Label for file selection (for file input)	"Select File pdf or image"
passwordToggle	boolean	Whether to show password toggle icon (for password input)	true
icon	Object	Icons for password toggle (for password input)	{ show: Eye, hide: EyeOff }
checklimit	number	Maximum number of checkboxes that can be selected (for checkbox input)	1
options	Object[]	Options for checkbox input	[{ label: "Married", value: "married" }, { label: "Unmarried", value: "unmarried" }]
className	string[]	Custom classes for the input field	["border-gray-300"]

File Upload Specific Attributes

Attribute	Type	Description	Example
number	number	Maximum number of files	5
icon	JSX.Element	Icon for removing files	<RiCloseLargeLine />
selectlabel	string	Label for file selection	"Select File pdf or image"
accept	string	Accepted file types	".pdf, image/*"
arialabel	string	Accessibility label	"FileUpload"
className	string[]	Custom classes for file input	["border-2 border-dotted border-gray-400 p-2 rounded-lg bg-gray-100"]
maxfiles	number	Maximum number of files	5

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	Object	Loader configuration for submit button	{ loader: true, className: ["border-red-500"] }

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😎😎!