form-blocker
Library to block form elements to process the submission.
Installation
npm i @aqpdev/form-blocker
Usage
React example
import React from "react"
import {FormBlocker} from "@aqpdev/form-blocker";
export default function Home()
{
const ref = useRef(null);
const myHandle = (e) => {
e.preventDefault();
const myForm = FormBlocker(ref);
// Block form elements
myForm.blockForm();
// Process form...
const formData = myForm.formData();
// Unblock form elements
myForm.unblockForm();
}
return (
<form id="myFormId" onSubmit={myHandle} ref={ref}>
<div className="mb-3">
<label className="form-label">Username</label>
<input type="text" name="username" className="form-control"/>
</div>
<div className="mb-3">
<label className="form-label">Password</label>
<input type="password" name="password" className="form-control"/>
</div>
<div>
<button className="btn btn-primary">Submit</button><br/>
</div>
</form>
)
}
Lib Example
import {FormBlocker} from "form-blocker";
const myForm = FormBlocker(formID);
// Block form elements
myForm.blockForm();
// Process form...
const formData = myForm.formData();
// Unblock form elements
myForm.unblockForm();
By default, a spinner will be displayed in submit buttons
Disabling spinner
myForm.blockForm(false);
Change size of spinner
myForm.blockForm(true, 32);