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.

import { SimpleForm } from "react-hartan"

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

export default App

Component Code

This is the code for Simple Form component.

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,
};
PreviousFormNextHero

Last updated