@mithya-team/react-form-plugin
v0.0.5
Published
A flexible and dynamic form library for React, featuring a generic form component capable of rendering various input types, including custom dynamic inputs. Built with accessibility and extensibility in mind.
Downloads
4
Readme
React Dynamic Form Library
A flexible and dynamic form library for React, featuring a generic form component capable of rendering various input types, including custom dynamic inputs. Built with accessibility and extensibility in mind.
Features
- Dynamic Form Fields: Render various input types based on provided configurations.
- Custom Input Types: Easily extend with custom input types.
- Form State Management: Integrated with
react-hook-form
for robust form state management and validation. - Accessibility: Inputs come with basic ARIA attributes and can be further customized for accessibility.
- Controlled Components: Manage and manipulate form inputs dynamically from parent components.
Installation
Install the package using npm or yarn:
npm install @mithya-team/react-form-plugin
or
yarn add @mithya-team/react-form-plugin
Usage
Integrating and utilizing the ReactForm
component in your React application is straightforward. Follow these steps to render and manage forms dynamically.
Basic Form Setup
Here's a basic example to get you started:
import React from "react";
import { ReactForm } from "@mithya-team/react-form-plugin";
const MyForm = () => {
const fieldsInput = [
{ type: "text", name: "name", label: "Name" },
// ...add other field configurations
];
const onSubmit = (data) => {
// Handle form submission data
console.log(data);
};
return <ReactForm fieldsInput={fieldsInput} onSubmit={onSubmit} />;
};
export default MyForm;
Validation
Example showing validation with zod
import React, { useState } from "react";
import { FieldInput, ReactForm } from "@mithya-team/react-form-plugin";
// import validation library
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
name: z.string().min(1, "Name is required"),
emailId: z.string().email("Invalid email format").min(1, "Email is required"),
gender: z.enum(["male", "female", "trans"], {
required_error: "Gender is required",
}),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{ type: "text", name: "name", label: "Name", defaultValue: "Ram" },
{ type: "email", name: "emailId", label: "Email ID" },
{
type: "radio",
name: "gender",
label: "Gender",
options: [
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
{ value: "trans", label: "Transgender" },
],
},
];
const UserDetailsForm: React.FC = () => {
const onSubmit = (data: any) => console.log(data);
return (
<div>
<ReactForm
fieldsInput={fieldsInput}
onSubmit={onSubmit}
resolver={zodResolver(schema)}
/>
<button onClick={logFormValues}>Log Form Values</button>
</div>
);
};
export default UserDetailsForm;
Conditional Update
Use conditions to update the field props
import React from "react";
import { FieldInput, ReactForm } from "@mithya-team/react-form-plugin";
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "radio",
name: "gender",
label: "Gender",
options: [
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
{ value: "trans", label: "Transgender" },
],
},
{
type: "select",
name: "favouritePokemon",
label: "Favourite Pokemon",
options: [
{ value: "pik", label: "Pikachu" },
{ value: "char", label: "Charmander" },
{ value: "saiduck", label: "Saiduck" },
],
inputProps: { disabled: true },
conditions: [
{
when: (formValues) => {
return formValues["gender"] === "male";
},
then: () => {
return { inputProps: { disabled: false } };
},
},
],
},
];
const UserDetailsForm: React.FC = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onSubmit = (data: any) => console.log(data);
return (
<div>
<ReactForm fields={fieldsInput} onSubmit={onSubmit} />
</div>
);
};
export default UserDetailsForm;
Extending Custom Input Types
Let's take a cue from OtpInput
Step 1: Create a custom Input Type
import React, { useEffect, useRef } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { ErrorField } from "@mithya-team/react-form-plugin";
import { OtpInputProps } from "../../@types";
import "../index.css";
export interface MyCustomFieldProps {
name: string; // name is required
label?: string;
classes?: {
root?: string;
// other classes for styling goes here
};
inputProps?: IInputProps;
defaultValue?: string;
}
const MyCustomField: React.FC<MyCustomFieldProps> = ({
name,
length,
classes,
label,
inputProps,
}) => {
const {
control,
formState: { errors },
} = useFormContext();
const inputRef = useRef<(HTMLInputElement | null)>(null);
const id = `form-${name}`;
return (
<>
<Controller
name={name}
control={control}
render={ ({ field: { onChange, onBlur, value = "" } }) => (
// Render React Component here
)}
/>
<ErrorField
id={`${id}-error`}
className={classes?.error}
error={errors?.[name]}
/>
</>
);
};
export default MyCustomField;
Step 2: Add custom input types by extending the input component map:
import { addtype } from "@mithya-team/react-form-plugin";
import type { FormFields } from "@mithya-team/react-form-plugin";
import MyCustomField from "./MyCustomInput";
// Extend the type
type ExtendedFormFields =
| FormFields
| Field<"my-custom-field", MyCustomFieldProps>;
addtype("my-custom-field", MyCustomField);
Step 3: Usage in ReactForm
// Define the form fields
const fieldsInput: ExtendedFormFields[] = [
{
type: "radio",
name: "gender",
label: "Gender",
options: [
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
{ value: "trans", label: "Transgender" },
],
},
// use here, it should support typescript intellisense
{
type: "my-custom-field",
name: "CustomField",
// other custom field props
}
API Reference
Below is the API reference for the ReactForm component and its associated input types.
ReactForm
A flexible and dynamic form component that renders based on provided field configurations.
Props
- fieldsInput: Array of field configuration objects
- onSubmit: Function to handle form submission.
- onGetValues: Function to expose the getValues method from react-hook-form
- classes: CSS Classes for styling
- resolver: Use any validation library supported by
react-hook-form
Field Configuration
Defines how each field in the form should be rendered and behave.
Properties
- type: Defines the type of input (e.g., 'text', 'checkbox', 'radio').
- name: A unique identifier for the form field. label (optional): Display label for the form field.
Additional properties for validation, aria attributes, and other custom behaviors.
TextField config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
name: z.string().min(1, "Name is required"),
address: z.string().min(6, "Address is required"),
emailId: z.string().email("Invalid email format").min(1, "Email is required"),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "text",
name: "name",
label: "Name",
defaultValue: "Ram",
inputProps: {
disabled: true,
},
},
{
type: "text",
name: "address",
label: "Address",
defaultValue: "8, Dasrath Palace, Ayodhya",
},
{ type: "email", name: "emailId", label: "Email ID" },
];
Props
type BasicInputProps = {
type: `${BasicInputType}`;
name: string;
label?: string;
classes?: {
container?: string;
inputContainer?: string;
label?: string;
input?: string;
error?: string;
};
inputProps?: IInputProps;
defaultValue?: string;
};
interface IInputProps
extends Omit<
InputHTMLAttributes<HTMLInputElement | HTMLSelectElement>,
"type"
> {
startAdornment?: ReactElement;
endAdornment?: ReactElement;
}
Styling
const classes = {
container?: string; // rf--basic-input-root
inputContainer?: string; // rf--input-container
label?: string; // rf--label
input?: string; // rf--input
error?: string; // rf--error
endAdornment?: string; // rf--start-adornment
startAdornment?: string; // rf--end-adornment
};
Checkbox config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
favouriteDish: z
.array(z.string())
.nonempty("Select at least one favourite dish")
.optional(), // mark the field as optional if conditional rendering is applied
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "checkbox",
name: "favouriteDish",
label: "Favourite Dish",
options: [
{ value: "rice", label: "Rice" },
{ value: "pizza", label: "Pizza" },
{ value: "burger", label: "Burger" },
],
defaultValue: ["rice"],
},
];
Props
type Option = {
value: string;
label: string;
disabled?: boolean;
};
interface CheckboxInputProps {
type: "checkbox";
name: string;
options: Option[];
label?: string;
classes?: {
root?: string;
container?: string;
checkbox?: string;
label?: string;
error?: string;
};
inputProps?: IInputProps;
defaultValue?: Option["value"][];
}
Styling
const classes = {
root?: string; // rf--checkbox-root
container?: string; // rf--checkbox-container
checkbox?: string; // rf--checkbox-input
label?: string; // rf--label
error?: string; // rf--error
};
select config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
favouritePokemon: z
.enum(["pik", "char", "saiduck"], {
required_error: "Pokemons is required",
})
.optional(), // mark the field as optional if conditional rendering is applied
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "select",
name: "favouritePokemon",
label: "Favourite Pokemon",
options: [
{ value: "pik", label: "Pikachu" },
{ value: "char", label: "Charmander" },
{ value: "saiduck", label: "Saiduck" },
],
},
];
Props
interface SelectInputProps {
type: "select";
name: string;
options: Option[];
label?: string;
classes?: {
root?: string;
container?: string;
select?: string;
label?: string;
option?: string;
error?: string;
};
inputProps?: IInputProps;
defaultValue?: Option["value"];
}
Styling
const classes = {
root?: string; // rf--select-root
select?: string; // rf--select-input
label?: string; // rf--label
option?: string; // rf--label rf--select-label
error?: string; // rf--error
};
Radio config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
gender: z.enum(["male", "female", "trans"], {
required_error: "Gender is required",
}),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "radio",
name: "gender",
label: "Gender",
options: [
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
{ value: "trans", label: "Transgender" },
],
},
];
Props
interface RadioInputProps {
type: "radio";
name: string;
options: Option[];
label?: string;
classes?: {
root?: string;
container?: string;
radio?: string;
label?: string;
error?: string;
rootLabel?: string;
};
inputProps?: IInputProps;
defaultValue?: Option["value"];
}
Styling
const classes = {
root?: string; // rf--radio-root
container?: string; // rf--radio-container
radio?: string; // rf--radio-input
label?: string; // rf-label rf--radio-label
error?: string; // rf--error
rootLabel?: string; // rf--label
};
switch config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
preferredTheme: z.boolean({ invalid_type_error: "value should be boolean" }),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "switch",
name: "preferredTheme",
label: "Dark Theme",
defaultValue: true,
},
];
Props
interface SwitchInputProps {
type: "switch";
name: string;
label?: string;
classes?: {
switchContainer?: string;
label?: string;
switch?: string;
button?: string;
input?: string;
activeSwitch?: string;
activeButton?: string;
};
inputProps?: IInputProps;
defaultValue?: boolean;
}
Styling
const classes = {
switchContainer?: string; // rf--switch-root
label?: string; // rf--switch-label rf--label
switch?: string; // rf--label rf--switch
button?: string; // rf--switch-button
input?: string; // rf--switch-input
activeSwitch?: string;
activeButton?: string;
};
File config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
file: z.any().refine((files) => files?.length == 1, "Image is required."),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "file",
name: "file",
label: "file",
},
];
Props
Same as BasicInput
Styling
Same as BasicInput
date and time config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
time: z.string(),
date: z.string(),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "time",
name: "time",
label: "Time",
defaultValue: true,
},
{
type: "date",
name: "date",
label: "Date",
defaultValue: true,
},
];
Props
Same as BasicInput
Styling
Same as BasicInput
Otp config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
phoneOtp: z.string(),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "otp",
name: "phoneOtp",
length: 6,
},
];
Props
interface OtpInputProps {
type: "otp";
name: string;
length: number;
label?: string;
classes?: {
root?: string;
input?: string;
error?: string;
label?: string;
inputContainer?: string;
};
inputProps?: IInputProps;
defaultValue?: string;
}
Styling
const classes = {
root?: string; // rf--otp-root
input?: string; // rf--input rf--otp-input
error?: string; // rf--error
label?: string; // rf--label
inputContainer?: string; // rf--otp-input-container
};
phone number config example
import { FieldInput } from "../../lib";
import { z } from "zod";
// Define the validation schema using Zod
const schema = z.object({
countryPhoneNumber: z.string(),
});
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "country-phone-number",
name: "countryPhoneNumber",
},
];
Props
interface CountryPhoneNumberInputProps {
type: "country-phone-number";
name: string;
classes?: {
root?: string;
select?: string;
input?: string;
inputWrapper?: string;
selectWrapper?: string;
error?: string;
label?: string;
};
label?: string;
inputProps?: IInputProps;
selectProps?: IInputProps;
defaultValue?: string;
}
Styling
const classes = {
root?: string; // rf--phone-number-root
select?: string; // rf--phone-number-country-select
input?: string; // rf--input rf--phone-number-input
inputWrapper?: string; // rf--phone-number-input-wrapper
selectWrapper?: string; // rf--phone-number-country-select-wrapper
error?: string; // rf--error
label?: string; // rf--label
};
plain text config example
// Define the form fields
const fieldsInput: FieldInput[] = [
{
type: "plainText",
name: "plainHelperText",
text: "This is helper text.",
},
];
Props
interface PlainTextProps {
type: "plainText";
name: string;
text?: string | JSX.Element;
className?: string;
}
Styling
className?: string; // rf--plain-text
Issues and Pull Requests
Contributions are always welcome! If you encounter any issues or would like to contribute, please file an issue or submit a PR:
Issues: GitHub Issues Pull Requests: GitHub Pull Requests