Au 11 - Front-end - React - Criando uma modal - Mestres BEGIN

Nesta aula, desenvolvemos um componente modal genérico que pode ser utilizado em diversos cenários da aplicação para exibir mensagens e interações ao usuário.

Estrutura do Componente

Principais características do modal:

Controle de visibilidade via prop isOpen
Mecanismo de fechamento via prop onClose
Conteúdo flexível através de children
Fechamento ao clicar fora do conteúdo

Implementação do Código

1import React, { MouseEvent } from "react";
2import "./Modal.css";
3interface Props {
4    children: JSX.Element;
5    onClose: () => void
6}
7const Modal = ({ onClose, children }: Props) => {
8    const handleClick = () => {
9        onClose();
10    };
11    const handleStopPropagation = (e: React.MouseEvent<HTMLDivElement>) => {
12        e.stopPropagation();
13    };
14    return (
15        <div className="modal-overlay" onClick={handleClick}>
16            <div onClick={handleStopPropagation} className="modal-content">
17                {children}
18            </div>
19        </div>
20    );
21};
22export default Modal;

Estilização CSS

1.modal-overlay {
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6    bottom: 0;
7    background-color: rgba(0, 0, 0, 0.5);
8    display: flex;
9    align-items: center;
10    justify-content: center;
11    z-index: 1000;
12}
13.modal-content {
14    background: white;
15    padding: 2rem;
16    border-radius: 8px;
17    max-width: 500px;
18    width: 90%;
19    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
20}

Utilização do Componente

Exemplo de implementação:

1function App() {
2    const [showModal, setShowModal] = useState(false);
3    return (
4        <>
5            <button onClick={() => setShowModal(true)}>
6                Abrir Modal
7            </button>
8            {showModal ? (
9                <Modal onClose={() => setShowModal(false)}>
10                    <h2>Ação concluída com sucesso!</h2>
11                    <p>O produto foi cadastrado no sistema.</p>
12                    <button onClick={() => setShowModal(false)}>
13                        Fechar
14                    </button>
15                </Modal>
16            ) : null}
17        </>
18    );