React-formez NPM

React FormEZ

Create forms with validation using our easy form builder.

Install

npm install react-formez

yarn add react-formez

Quick start

import { Form, FormField, FormDataType } from "react-formez";

const App = () => {
    const formFields: FormField[] = [
        {
            id: "email",
            type: "text",
            label: "Enter email",
            required: true,
        },
        {
            id: "password",
            type: "password",
            label: "Enter your password",
            required: true,
        },
        {
            id: "submit",
            type: "submit",
            children: "Login",
        },
    ];
    const handleSubmit = (isFormValid: boolean, data: FormDataType) => {
        console.log(isFormValid, data);
    };
    return (
        <Form
            formSpecs={formFields}
            onSubmit={handleSubmit}
        />
    );
}
export default App;

Documentation

Form

Parameter	Type	Mandatory	Description
`formSpecs`	`FormField[]` \| `(props:FormSpecProps)` => `FormField[]`	Required	Form schema to populate UI and corresponding states.`(props: FormSpecProps) => FormField[]` is used to utilize inbuilt form functions and validate using associated fields.
`onSubmit`	`(isFormValid: boolean, data: FormDataType) => void`	Required	Form Submit Handler.
`className`	`string`	Optional	Custom CSS class name.
`style`	`object`	Optional	Inline CSS Properties.

FormField

Parameter	Type	Mandatory	Description
`type`	`"text" \\| "email" \\| "date" \\| "time" \\| "datetime-local" \\| "password" \\| "color" \\| "file" \\| "range" \\| "radio" \\| "checkbox" \\| "dropdown" \\| "button" \\| "submit"\\| "row" \\| "column"`	Required	Form field type.
`id`	`string`	Required	Form field unique id.
`label`	`string`	Required	Form field label.
`options`	`string[]`	Conditional	Form field options. Mandatory for fields: `checkbox`, `radio`, `dropdown`.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	Conditional	Form button onClick. Mandatory for field: `button`.
`children`	`JSX Element`	Conditional	Form button children. Mandatory for fields: `button`, `submit`.
`validator`	`FormInputValidatorType[]`	Optional	Form field custom validation.
`value`	`string`	Optional	Form field default value.
`required`	`boolean`	Optional	Required field.
`disabled`	`boolean`	Optional	Disabled field.
`className`	`string`	Optional	Custom CSS class name.
`style`	`object`	Optional	Inline CSS Properties.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	Optional	Form field onChange handler.

You can also include all the HTML Input attributes along with these.

FormSpecProps

Parameter	Type	Description
`data`	`object`	Form data.
`updateData`	`(data: FormDataType): void`	In-built function to update the form state.
`resetData`	`(): void`	In-built function to reset the form state.

FormInputValidatorType

Parameter	Type	Description
`message`	`string`	Validation Message.
`validate`	`(value: string) => boolean`	Function which validates form field onChange.

Examples

1. Form with custom validation

import { Form, FormField, FormDataType } from "react-formez";

const App = () => {
    const formFields: FormField[] = [
        {
            id: "name",
            type: "text",
            label: "Enter your Name",
            required: true,
        },
        {
            id: "contact",
            type: "row",
            fields: [
            {
                id: "email",
                type: "text",
                label: "Enter email",
                required: true,
                validator: [
                {
                    message: "Enter valid email address",
                    validate: (val) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val),
                },
                ],
            },
            {
                id: "phoneno",
                type: "text",
                label: "Enter phoneno",
                required: true,
                validator: [
                {
                    message: "Phone number should be 10 character length",
                    validate: (val) => val.length !== 10,
                },
                {
                    message: "Enter a valid phone number",
                    validate: (val) => !/^[6-9]\d{9}$/.test(val),
                },
                ],
            },
            ],
        },
        {
            id: "info",
            type: "row",
            fields: [
            {
                type: "radio",
                id: "gender",
                label: "Select your gender",
                options: ["Male", "Female"],
                value: "Male",
                required: true,
            },
            {
                type: "dropdown",
                id: "occupation",
                label: "Select your occupation",
                options: ["Student", "Working"],
                required: true,
            },
            ],
        },
        {
            id: "pass",
            type: "row",
            fields: [
            {
                id: "password",
                type: "password",
                label: "Choose your password",
                required: true,
                validator: [
                {
                    message: "Password should be atlease six character length",
                    validate: (val) => val.length < 6,
                },
                ],
            },
            {
                id: "confirmPassword",
                type: "password",
                label: "Confirm your password",
                required: true,
                validator: [
                {
                    message: "Password should be atlease six character length",
                    validate: (val) => val.length < 6,
                },
                ],
            },
            ],
        },
        {
            id: "terms",
            type: "checkbox",
            label: "Accept the terms and conditions",
            required: true,
        },
        {
            id: "submit",
            type: "submit",
            children: "Submit",
        },
    ];
    const handleSubmit = (isFormValid: boolean, data: FormDataType) => {
        console.log(isFormValid, data);
    };
    return (
        <Form
            formSpecs={formFields}
            onSubmit={handleSubmit}
        />
    );
}
export default App;

In this example, we have utilized the validator attribute to implement custom validation for the email, phone number, and password fields.

Note: validator attribute can accept multiple validations. As demonstrated in the phone number validation, the validations are executed from top to bottom, and the first captured validation message will be displayed in the UI.

2. Form with associated fields and other inbuild functions

import { Form, FormField, FormSpecProps, FormDataType } from "react-formez";

const App = () => {
    const renderFormFields = ({ data, updateData, resetData }: FormSpecProps) =>{

        const formFields: FormField[] = [
            {
                id: "name",
                type: "text",
                label: "Enter your Name",
                required: true,
            },
            {
                id: "pass",
                type: "row",
                fields: [
                {
                    id: "password",
                    type: "password",
                    label: "Choose your password",
                    required: true,
                    validator: [
                    {
                        message: "Password should be atlease six character length",
                        validate: (val) => val.length < 6,
                    },
                    ],
                },
                {
                    id: "confirmPassword",
                    type: "password",
                    label: "Confirm your password",
                    required: true,
                    validator: [
                    {
                        message: "Password should be atlease six character length",
                        validate: (val) => val.length < 6,
                    },
                    {
                        message: "Password should match",
                        validate: (val) => val !== data['password'],
                    }
                    ],
                },
                ],
            },
            {
                id: "cta",
                type: "row",
                fields: [
                    {
                        id: "submit",
                        type: "submit",
                        children: "Submit",
                    },
                    {
                        id: "reset",
                        type: "button",
                        children: "Reset",
                        onClick: ()=>{
                            resetData()
                        }
                    }
                ]
            }
        ];
        return formFields
    }

    const handleSubmit = (isFormValid: boolean, data: FormDataType) => {
    console.log(isFormValid, data);
    };
    return (
        <Form
            formSpecs={renderFormFields}
            onSubmit={handleSubmit}
        />
    );
}
export default App;

In this example, we have demonstrated how to use associated fields to validate a field like confirmPassword.

Additionally, we have used the built-in function resetData to reset the form inputs, and if required, we can also use updateData.