react-bootstrap

import React, { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; import Form from 'react-bootstrap/Form'; import Container from 'react-bootstrap/Container'; function MyFormModal() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log('Form submitted!'); handleClose(); }; return ( <Container className="p-4"> <Button variant="primary" onClick={handleShow}> Launch demo modal </Button> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Login</Modal.Title> </Modal.Header> <Modal.Body> <Form onSubmit={handleSubmit}> <Form.Group className="mb-3" controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text> </Form.Group> <Form.Group className="mb-3" controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Button variant="secondary" onClick={handleClose} className="me-2"> Close </Button> <Button variant="primary" type="submit"> Submit </Button> </Form> </Modal.Body> </Modal> </Container> ); } export default MyFormModal;