dotform v0.8.2

Dotform

An easy way to create professional forms in react

Dotform is an easy way to create professional forms in minutes, this library based on React Js.

Installation

npm i dotform --save

Usage

import DotForm from 'dotform';

const Form = (props) => {

    const [lastName, setLastName] = useState("Soen");
    
    const formStructure = [
        // Row 1
        {
            title: "Lorem Ipsum", // Row Title | Optional
            description: "Vivamus suscipit tortor eget felis porttitor volutpat.", // Row description || Optional
            rows: [
                [
                    {
                        name: "name", // Optional
                        label: "Name", // Optional
                        input: {
                            type: "text",
                            required: true,
                            value: "Lord"
                        }
                    },
                    {
                        name: "last_name",
                        label: "Last Name",
                        input: {
                            type: "text",
                            required: false,
                            value: lastName
                        }
                    }
                ],
                // Row 2
                [
                    {
                        name: "email",
                        label: "Email",
                        input: {
                            type: "email",
                            required: true
                        }
                    },
                    {
                        name: "password",
                        label: "Password",
                        input: {
                            type: "password",
                            required: true
                        }
                    }
                ],
            ]
        }
    ]
    
    const handleSubmit = (data) => {
        console.log(data);
    }

    return (
        <DotForm
            onSubmit={handleSubmit}
            structure={formStructure}
        />
    )
}

Result