App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React, { useState } from "react"; import Progress from "react-progress"; const UserForm = () => { const [formData, setFormData] = useState({ name: "", email: "" }); const [percent, setPercent] = useState(0); const [showDetails, setShowDetails] = useState(false); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e) => { e.preventDefault(); setShowDetails(false); setPercent(0); // Reset progress bar const interval = setInterval(() => { setPercent((prev) => { if (prev >= 100) { clearInterval(interval); setShowDetails(true); // Show user details after progress return prev; } return prev + 10; // Increment progress by 10 }); }, 200); // Delay to simulate progress animation }; return ( <div style={{ padding: "20px", maxWidth: "400px", margin: "auto" }}> <form onSubmit={handleSubmit}> <div style={{ marginBottom: "10px" }}> <label> Name: <br /> <input type="text" name="name" value={formData.name} onChange={handleChange} style={{ width: "100%", padding: "8px" }} required /> </label> </div> <div style={{ marginBottom: "10px" }}> <label> Email: <br /> <input type="email" name="email" value={formData.email} onChange={handleChange} style={{ width: "100%", padding: "8px" }} required /> </label> </div> <button type="submit" style={{ padding: "10px 20px", background: "blue", color: "white", border: "none", cursor: "pointer", }} > Submit </button> </form> <Progress percent={percent} color="red" height={5} /> {showDetails && ( <div style={{ marginTop: "20px", padding: "10px", border: "1px solid #ccc" }}> <h3>User Details:</h3> <p> <strong>Name:</strong> {formData.name} </p> <p> <strong>Email:</strong> {formData.email} </p> </div> )} </div> ); }; export default UserForm; |
