Modal em React para ser usado na raiz do site que abre e fecha por função externa скачать в хорошем качестве

Modal em React para ser usado na raiz do site que abre e fecha por função externa

Uma das coisas que me incomoda em frameworks baseados em componentes como React, Angular e Vue é a dependência rígida da hierarquia de componentes. Por padrão, um Modal (como os do Bootstrap/Reactstrap) possui uma propriedade como isOpen que precisa ser controlada pelo componente pai. Ou seja, o modal não decide quando abrir ou fechar sozinho: ele precisa receber uma prop para abrir e emitir um evento para que o componente pai o feche. Isso funciona bem quando o modal é aberto apenas naquele ponto específico da interface. Mas surge um problema arquitetural quando precisamos de um modal global, que pode ser acionado por qualquer componente, em qualquer nível da aplicação — como um modal de confirmação, alerta ou seleção de contexto. Nesses casos, controlar tudo via props gera: Prop drilling Acoplamento excessivo Componentes pais inchados Fluxos difíceis de manter em aplicações grandes Para resolver isso, neste código eu desacoplei completamente a abertura e o fechamento do modal da árvore de componentes do React, criando um controlador externo que funciona como um “observer” do estado do modal. Ou seja, em vez de abrir o modal passando props ou propagando eventos entre vários níveis de componentes, eu passo a controlá-lo através de funções globais (mostrarSelecionarContrato e ocultarSelecionarContrato). Na prática, o componente continua sendo reativo e usando useState, mas a decisão de abrir ou fechar deixa de depender da hierarquia da UI e passa a ser feita de forma imperativa, como um serviço de interface. Eu já implementei isso usando Observer, com subscribe e notify, mas percebi que era complexidade desnecessária, porque na prática sempre existe apenas um assinante: o próprio modal. Então, em vez de simular um event bus inteiro para um único listener, eu simplifiquei para um controlador imperativo que expõe métodos públicos de abrir e fechar. ps: é um projeto real e eu realmente não me importo de ficar misturando inglês e português, só estava fazendo algo que precisava e resolvi gravar.