React Dynamic Form Builder
A dynamic form component for React that allows you to quickly create forms with various input types, including text, email, password, number, checkbox, radio, and select.
Supports customizable validators and custom buttons.
Installation
You can install the package via npm:
npm install dynamic-form-react
Usage
import React from "react";
import {
Form,
required,
maxLength,
minLength,
minValue,
maxValue,
number,
email,
} from "dynamic-form-react";
function App() {
const is_equal_test = (input_str) =>
input_str.toLowerCase() === "test" ? "Test is not allowed" : undefined;
const customButtonHandler = () => {
console.log("Hello");
};
const inputs = [
{
type: "email",
name: "email",
label: "Email",
},
{
type: "password",
name: "password",
label: "Password",
validators: [required, minLength(5), maxLength(10)],
required: true,
},
{
type: "number",
name: "number",
label: "Number",
min: 0,
max: 100,
validators: [required, maxValue(5), minValue(2)],
required: true,
},
{
type: "checkbox",
name: "countries",
label: "Countries",
options: ["India", "USA", "UK", "Australia", "Canada", "Germany"],
required: true,
validators: [required],
},
{
type: "radio",
name: "gender",
options: ["male", "female", "other"],
label: "Gender",
initialvalue: "male",
required: true,
},
{
type: "select",
name: "fruits",
label: "Fruits",
options: [
{ value: "", label: "Please Select a Value" },
{ value: 1, label: "Apple" },
{ value: 2, label: "Orange" },
],
validators: [required],
required: true,
},
{
type: "select",
name: "Counting",
label: "Numbers",
options: [
{ value: 1, label: "One" },
{ value: 2, label: "Two" },
],
multiple: true,
validators: [required],
required: true,
},
{
type: "color",
name: "color",
label: "Color",
},
{
type: "range",
name: "range",
label: "Range",
min: 0,
max: 10,
initialvalue: 5,
step: 3,
validators: [required],
},
{
type: "text",
name: "text",
label: "Text",
validators: [is_equal_test],
},
{
type: "button",
name: "button-my",
label: "Custom Button",
handler: customButtonHandler,
},
{
type: "tel",
name: "tel",
label: "Tel (xxx)-xxx-xxxx",
pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}",
validators: [required],
},
{
type: "time",
name: "time",
label: "Time",
validators: [required],
},
{
type: "url",
name: "url",
label: "Url",
validators: [required],
},
{
type: "week",
name: "week",
label: "Week",
validators: [required],
},
{
type: "date",
name: "date",
label: "Date",
},
{
type: "datetime-local",
name: "datetime-local",
label: "Datetime-local",
},
{
type: "file",
name: "file",
label: "File",
},
{
type: "hidden",
name: "hidden",
label: "Hidden",
},
{
type: "image",
name: "image",
label: "Image",
},
{
type: "month",
name: "month",
label: "Month",
},
{
type: "radio",
name: "radio",
label: "Radio",
},
];
const onSubmit = (values) => {
console.log(values);
};
return (
<div className="App">
<Form
form_title={form_title} //"Sign_In"
inputs={inputs}
image_metadata={{
src: { src }, // "https://i.insider.com/526e70dbecad040247237811?width=1300&format=jpeg&auto=webp"
alt: { alt_text }, // "Apple Logo"
}}
onSubmit={onSubmit}
submit_button_text={submit_button_text} //"Sign In"
/>
</div>
);
}
export default App;
Features
- Supports multiple input types including text, email, password, number, checkbox, radio, select, etc.
- Easy to use with a simple configuration object for each input.
- Customizable validators for input validation.
- Ability to create custom buttons with custom handlers.
- Supports adding an image to the form.
- Allows setting the form title.
- Allows customizing the submit button text.
Example Usage
Basic Form
const inputs = [
{
type: "email",
name: "email",
label: "Email",
},
];
const onSubmit = (values) => {
console.log(values);
};
<Form inputs={inputs} onSubmit={onSubmit} />;
Using Validators
import { required, email } from "dynamic-form-react";
const inputs = [
{
type: "email",
name: "email",
label: "Email",
validators: [required, email],
},
];
const onSubmit = (values) => {
console.log(values);
};
<Form inputs={inputs} onSubmit={onSubmit} />;
Custom Button with Handler
const inputs = [
{
type: "button",
name: "customButton",
label: "Custom Button",
handler: () => {
console.log("Custom button clicked!");
},
},
];
const onSubmit = (values) => {
console.log(values);
};
<Form inputs={inputs} onSubmit={onSubmit} />;
Including Other Input Types
You can include a variety of other input types in your form by configuring them in the inputs array. Below are some examples:
Number Input
const inputs = [
{
type: "number",
name: "number",
label: "Number",
min: 0,
max: 10,
validators: [required, maxValue(5), minValue(2)],
required: true,
},
];
Checkbox Input
const inputs = [
{
type: "checkbox",
name: "Countries",
label: "Countries of the world",
options: ["India", "USA", "UK", "Australia", "Canada", "Germany"],
required: true,
validators: [required],
},
];
Radio Input
const inputs = [
{
type: "radio",
name: "gender",
options: ["male", "female", "other"],
label: "Gender",
initialvalue: "male",
required: true,
},
];
Range Input
const inputs = [
{
type: "range",
name: "range",
label: "Range",
min: 0,
max: 10,
initialvalue: 5,
step: 3,
validators: [required],
},
];
Validators
Custom validators can be created and passed along with the input configuration. Validators are functions that take the input value as an argument and return an error message if validation fails, or undefined if validation passes.
Customization
You can customize the appearance of the form by applying your own CSS styles.
Feedback
If you have any feedback, suggestions, or issues, feel free to open an issue on GitHub.
License
This project is licensed under the MIT License.
