SimpleForm

The simple form component is derived from the Form component, and it do not uses the hook.

Preview

Usage

npm i react-hartan

import { SimpleForm } from "react-hartan"

function App() {

  return (
    <>
      <SimpleForm></SimpleForm>
    </>
  )
}

export default App

Customization With Props

• fields -> Required to be sent by the user, accepts an object, of the following structure:

{
    inputTag: [
        {
            inputType: "", // string
            inputId: "", // string
            inputName: "", // string
            inputLabel: "", // string
            required: true // boolean
        },
    ],
    textareaTag: [
        {
            textareaId: "", // string
            textareaName: "", // string
            textareaLabel: "", // string
            required: true // boolean
        }
    ]
}

NOTE: Keep the name of the keys same as above.

• formTitle -> Accepts a string value, used as the form heading.

• action -> Accepts a URL string for the action attribute of the form tag, sent by user.

• method -> Specifies the default method as POST in the method attribute of form tag.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userFormCardStyle -> Accepts class name(s) as string, custom styling prop for the fullthe full form card container.

• userTitleStyle -> Accepts class name(s) as string, custom styling prop for the heading of the form inside form card.

• userFormStyle -> Accepts class name(s) as string, custom styling prop for the form container inside form card.

• userInputFieldStyle -> Accepts class name(s) as string, custom styling prop for the input fields container.

Default

import { SimpleForm } from "react-hartan"

function App() {
  
  return (
    <>
      <SimpleForm></SimpleForm>
    </>
  )
}

export default App

With Custom Props

// App.css
.m-2{
   margin: 2rem;
}

.bg-pink{
   background-color: pink;
}

.my-class{
   font-size: 2rem;
   background-color: red;
   padding: 1rem;
}


// App.jsx
import { SimpleForm } from "react-hartan"

export default function App() {

  return (
    <>
      <SimpleForm userFormCardStyle={"my-class"} userFormStyle={"bg-pink"} userInputFieldStyle={"m-2"}></SimpleForm>
    </>
  )
}

Component Code

This is the code for Simple Form component.

SimpleForm.jsx

import formStyle from "./Form.module.css"
import { useState } from "react"
import PropTypes from "prop-types"

const fieldsData = {
    inputTag: [
        {
            inputType: "text",
            inputId: "name",
            inputName: "name",
            inputLabel: "Name",
            required: true
        },
        {
            inputType: "email",
            inputId: "email",
            inputName: "email",
            inputLabel: "Email",
            required: true
        },
        {
            inputType: "number",
            inputId: "phoneNo",
            inputName: "phoneNo",
            inputLabel: "Contact Number",
            required: true
        }
    ],
    textareaTag: [
        {
            textareaId: "message",
            textareaName: "message",
            textareaLabel: "Message",
            required: true
        }
    ]
};


export default function SimpleForm({ fields = fieldsData, action = "", method = "POST", formTitle = "Leave a Comment", id, userFormCardStyle, userTitleStyle, userFormStyle, userInputFieldStyle }) {

    const [data, setData] = useState({});
    const updateData = (e) => {
        setData({
            ...data,
            [e.target.name]: e.target.value
        })
    };

    return (
        <div className={`${formStyle.formCard} ${userFormCardStyle}`}>
            <span className={`${formStyle.title} ${userTitleStyle}`}>{formTitle}</span>

            <form className={`${formStyle.form} ${userFormStyle}`} action={action} method={method} target="_blank">

                {
                    fields.inputTag.map((field, id) => {
                        return (
                            <div className={`${formStyle.group} ${userInputFieldStyle}`} key={id}>
                                <input placeholder="" type={field.inputType} name={field.inputName} id={field.inputId} required={field.required === true} onChange={updateData} />
                                <label htmlFor={field.inputId}>{field.inputLabel}</label>
                            </div>
                        )
                    })
                }

                {
                    fields.textareaTag.map((textarea, id) => {
                        return (
                            <div className={`${formStyle.group} ${userInputFieldStyle}`} key={id}>
                                <textarea placeholder="" id={textarea.textareaId} name={textarea.textareaName} required={textarea.required === true} onChange={updateData}></textarea>
                                <label htmlFor={textarea.textareaId}>{textarea.textareaLabel}</label>
                            </div>
                        )
                    })
                }

                <button type="submit" id="btn">Submit</button>
            </form>
        </div>
    )
}

SimpleForm.propTypes = {
    fields: PropTypes.shape({
        inputTag: PropTypes.arrayOf(PropTypes.shape({
            inputType: PropTypes.string,
            inputId: PropTypes.string,
            inputName: PropTypes.string,
            inputLabel: PropTypes.string,
            required: PropTypes.bool
        })),
        textareaTag: PropTypes.arrayOf(PropTypes.shape({
            textareaId: PropTypes.string,
            textareaName: PropTypes.string,
            textareaLabel: PropTypes.string,
            required: PropTypes.bool
        }))
    }),
    action: PropTypes.string,
    method: PropTypes.string,
    formTitle: PropTypes.string,
    id: PropTypes.string,
    userFormCardStyle: PropTypes.string,
    userTitleStyle: PropTypes.string,
    userFormStyle: PropTypes.string,
    userInputFieldStyle: PropTypes.string,
};

Form.module.css

/* Form Styling */

/* the full form component container */
.formCard {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    width: 40rem;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

/* the heading of the form inside form card */
.title {
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
}

/* the form container inside form card */
.form {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.group {
    position: relative;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form .group label {
    font-size: 1.5rem;
    color: rgb(99, 102, 102);
    position: absolute;
    top: -1rem;
    left: 1rem;
    background-color: #fff;
    transition: all .3s ease;
}

.form .group input,
.form .group textarea {
    padding: 1rem;
    border-radius: .5rem;
    border: .1rem solid rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
    outline: 0;
    width: 100%;
    background-color: transparent;
}

.form .group input:placeholder-shown+label,
.form .group textarea:placeholder-shown+label {
    top: 1rem;
    background-color: transparent;
}

.form .group input:focus,
.form .group textarea:focus {
    border-color: #1e90ff;
}

.form .group input:focus+label,
.form .group textarea:focus+label {
    top: -1rem;
    left: 1rem;
    background-color: #fff;
    color: #1e90ff;
    font-weight: 600;
    font-size: 1.5rem;
}

.form .group textarea {
    resize: none;
    height: 100px;
}

.form button {
    background-color: #1e90ff;
    color: #fff;
    border: none;
    border-radius: .5rem;
    padding: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form button:hover {
    background: linear-gradient(90deg, rgba(30, 144, 255, 1) 0%, rgba(0, 212, 255, 1) 100%);

}

/* the container shown  when user submits the form */
.submitted {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background-color: #ffffff;
    height: 33rem;
    width: 36rem;
}

/* the suuccess logo inside the submitted container */
.submittedSVG {
    animation: slide-in .5s;
}

@keyframes slide-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}