SimpleForm
The simple form component is derived from the Form component, and it do not uses the hook.
Last updated
The simple form component is derived from the Form component, and it do not uses the hook.
Last updated
npm i react-hartan
import { SimpleForm } from "react-hartan"
function App() {
return (
<>
<SimpleForm></SimpleForm>
</>
)
}
export default App
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
// 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>
</>
)
}
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,
};
/* 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);
}
}