Criação de um componente modal com Portals

Boas-vindas

Estrutura básica do componente modal

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Plano de fundo e interrupção da propagação

Fechando com a tecla Escape

useEffect(() => {
  if (!isOpen) return;
  const handle = (e) => { if (e.key === 'Escape') onClose(); };
  document.addEventListener('keydown', handle);
  return () => document.removeEventListener('keydown', handle);
}, [isOpen, onClose]);

Impedindo a rolagem do corpo da página

useEffect(() => {
  if (isOpen) {
    document.body.style.overflow = 'hidden';
  }
  return () => { document.body.style.overflow = ''; };
}, [isOpen]);

CSS básico para o modal

.backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-width: 320px;
}

Usando o modal

function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Hello from the modal!</h2>
        <button onClick={() => setOpen(false)}>Close</button>
      </Modal>
    </>
  );
}

Adicionando um botão de fechamento interno

Animação com transições CSS

// Toggle class based on isOpen
<div className={`backdrop ${isOpen ? 'visible' : 'hidden'}`}>

Compondo o cabeçalho e o rodapé do modal

Verificação rápida

Recapitulação

A seguir