Check here: https://www.npmjs.com/package/formknight-react
FormKnight React is a reusable and customizable Form Validator Widget built using React and TypeScript. It provides advanced form validation, error handling, and customizable styles, making it easy to create and manage forms in your React applications.
- Advanced Form Validation: Real-time validation with customizable rules.
- TypeScript Support: Strongly typed components and props.
- Error Handling: Display error messages for invalid inputs.
- Customizable Styles: Easily modify the appearance of form fields.
- Reusable Components: Modular and reusable form components.
- Debounced Validation: Improve performance with debounced validation.
Install the package using npm:
npm install formknight-reactor
yarn add formknight-reactBefore using include this CSS file in order to render the styling of the components
import '/node_modules/formknight-react/dist/formknight-react.css'Here's an example of how to use the FormKnight React components in your application:
<Input
name="username"
label="Username"
type="text"
value=""
placeholder="Enter username"
minLength={3}
maxLength={20}
/>The Form component wraps all input fields and manages the form state and submission.
Props:
onSubmit: Function to handle form submission.children: Form fields and buttons.className: Custom CSS class for the form.
The Input component renders a text input field with validation.
Props:
name: Name of the input field.label: Label for the input field.type: Type of the input field (text, email, password, number).placeholder: Placeholder text.value: Value of the input field.onChange: Function to handle value changes.required: Whether the field is required.minLength: Minimum length of the input value.maxLength: Maximum length of the input value.className: Custom CSS class for the input field.
The PasswordField component renders a password input field with validation and visibility toggle.
Props:
name: Name of the input field.label: Label for the input field.value: Value of the input field.onChange: Function to handle value changes.required: Whether the field is required.className: Custom CSS class for the input field.
The RadioButton component renders a group of radio buttons with validation.
Props:
name: Name of the radio button group.label: Label for the radio button group.options: Array of options for the radio buttons.onChange: Function to handle value changes.required: Whether the field is required.className: Custom CSS class for the radio button group.
The Dropdown component renders a dropdown menu with validation.
Props:
name: Name of the dropdown field.label: Label for the dropdown field.options: Array of options for the dropdown.onChange: Function to handle value changes.required: Whether the field is required.
The SearchableDropdown component renders a searchable dropdown menu.
Props:
label: Label for the dropdown field.options: Array of options for the dropdown.onChange: Function to handle value changes.placeholder: Placeholder text.required: Whether the field is required.
The FileUpload component renders a file upload field with validation.
Props:
label: Label for the file upload field.name: Name of the file upload field.onChange: Function to handle file changes.required: Whether the field is required.allowedTypes: Array of allowed file types.maxSize: Maximum file size in MB.className: Custom CSS class for the file upload field.
The DatePicker component renders a date picker with validation.
Props:
name: Name of the date picker field.value: Selected date value.onChange: Function to handle date changes.label: Label for the date picker field.required: Whether the field is required.
The Button component renders a button.
Props:
name: Name of the button.label: Label for the button.type: Type of the button (button, submit, reset).onClick: Function to handle button clicks.disabled: Whether the button is disabled.
import React from 'react';
import {
Button,
DatePicker,
Dropdown,
FileUpload,
Input,
PasswordField,
RadioButton,
SearchableDropdown,
Form,
} from 'formknight-react';
const App: React.FC = () => {
const handleSubmit = (formData: Record<string, any>) => {
console.log("Form Submitted", formData);
};
const options = [
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
];
return (
<div className="p-5 md:p-10 py-20 bg-gradient-to-r from-blue-100 to-cyan-100 min-h-screen flex flex-col items-center space-y-6">
<h1 className="text-4xl text-cyan-800 font-bold">Form Knight ⚔️</h1>
<div className="w-full md:w-1/2 max-w-xl flex flex-col gap-2">
<Form onSubmit={handleSubmit} className="bg-white rounded-xl shadow">
<DatePicker
name="date"
value=""
label="Date of Birth"
onChange={(value: string) => console.log(value)}
/>
<Input
name="username"
label="Username"
type="text"
placeholder="Enter username"
onChange={(value: string) => console.log(value)}
minLength={3}
maxLength={20}
required
/>
<Input
name="phone"
label="Phone Number"
type="number"
onChange={(value: string) => console.log(value)}
required
/>
<PasswordField
name="password"
label="Password"
required
onChange={(value: string) => console.log(value)}
/>
<Input
name="email"
label="Email Address"
type="email"
onChange={(value: string) => console.log(value)}
required
/>
<Dropdown
name="dropdown"
label="Dropdown"
options={options}
onChange={(value: string) => console.log(value)}
required
/>
<SearchableDropdown
label="Searchable Dropdown"
options={options}
onChange={(value: string) => console.log(value)}
/>
<RadioButton
name="myRadioGroup"
label="Choose an Option"
options={options}
onChange={(value: string) => console.log(value)}
/>
<FileUpload
name="customFile"
label="Upload a Document"
onChange={(file) => console.log(file)}
required
maxSize={5}
allowedTypes={["image/png", "image/jpeg", "application/pdf"]}
className="border border-gray-300 p-4 rounded-lg bg-white shadow-md"
/>
<Button label="Submit" type="submit" />
</Form>
</div>
</div>
);
};
export default App;Happy coding with FormKnight React! ⚔️