4 etapas para configurar modais globais no React

Aprenda como criar janelas pop-up interativas em um aplicativo da web React.

Uma caixa de diálogo modal é uma janela que aparece no topo de uma página da web e requer a interação do usuário antes de desaparecer. O React tem algumas maneiras de ajudar você a gerar e gerenciar modais com o mínimo de codificação.

Se você criá-los dentro de um escopo local, deverá importar modais para cada componente e então criar um estado para gerenciar o status de abertura e fechamento de cada modal.

Ao usar um estado global, você não precisa importar modais para cada componente nem criar um estado para cada um. Você pode importar todos os modais em um só lugar e usá-los em qualquer lugar.

Na minha opinião, a melhor maneira de gerenciar diálogos modais em seu aplicativo React é globalmente usando um contexto React em vez de um estado local.

Como criar modais globais

Aqui estão as etapas (e o código) para configurar modais globais no React. Estou usando o Patternfly como base, mas os princípios se aplicam a qualquer projeto.

1. Crie um componente modal global

Em um arquivo chamado GlobalModal.tsx, crie sua definição modal:

import React, { useState, createContext, useContext } from 'react';
import { CreateModal, DeleteModal,UpdateModal } from './components';

export const MODAL_TYPES = {
CREATE_MODAL:”CREATE_MODAL”,
 DELETE_MODAL: “DELETE_MODAL”,
 UPDATE_MODAL: “UPDATE_MODAL”
};

const MODAL_COMPONENTS: any = {
 [MODAL_TYPES.CREATE_MODAL]: CreateModal,
 [MODAL_TYPES.DELETE_MODAL]: DeleteModal,
 [MODAL_TYPES.UPDATE_MODAL]: UpdateModal
};

type GlobalModalContext = {
 showModal: (modalType: string, modalProps?: any) => void;
 hideModal: () => void;
 store: any;
};

const initalState: GlobalModalContext = {
 showModal: () => {},
 hideModal: () => {},
 store: {},
};

const GlobalModalContext = createContext(initalState);
export const useGlobalModalContext = () => useContext(GlobalModalContext);

export const GlobalModal: React.FC<{}> = ({ children }) => {
 const [store, setStore] = useState();
 const { modalType, modalProps } = store || {};

 const showModal = (modalType: string, modalProps: any = {}) => {
   setStore({
     ...store,
     modalType,
     modalProps,
   });
 };

 const hideModal = () => {
   setStore({
     ...store,
     modalType: null,
     modalProps: {},
   });
 };

 const renderComponent = () => {
   const ModalComponent = MODAL_COMPONENTS[modalType];
   if (!modalType || !ModalComponent) {
     return null;
   }
   return <ModalComponent id="global-modal" {...modalProps} />;
 };

 return (
   <GlobalModalContext.Provider value={{ store, showModal, hideModal }}>
     {renderComponent()}
     {children}
   </GlobalModalContext.Provider>
 );
};

Neste código, todos os componentes da caixa de diálogo são mapeados com o tipo modal. As funções showModal e hideModal são usadas para abrir e fechar caixas de diálogo, respectivamente.

A função showModal usa dois parâmetros: modalType e modalProps. O parâmetro modalProps é opcional; é usado para passar qualquer tipo de dado para o modal como suporte.

A função hideModal não possui nenhum parâmetro; chamá-lo faz com que o modal aberto atual seja fechado.

2. Crie componentes de diálogo modal

Em um arquivo chamado CreateModal.tsx, crie um modal:

import React from "react";
import { Modal, ModalVariant, Button } from "@patternfly/react-core";
import { useGlobalModalContext } from "../GlobalModal";

export const CreateModal = () => {
 const { hideModal, store } = useGlobalModalContext();
 const { modalProps } = store || {};
 const { title, confirmBtn } = modalProps || {};

 const handleModalToggle = () => {
   hideModal();
 };

 return (
   <Modal
     variant={ModalVariant.medium}
     title={title || "Create Modal"}
     isOpen={true}
     onClose={handleModalToggle}
     actions={[
       <Button key="confirm" variant="primary" onClick={handleModalToggle}>
         {confirmBtn || "Confirm button"}
       </Button>,
       <Button key="cancel" variant="link" onClick={handleModalToggle}>
         Cancel
       </Button>
     ]}
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
     commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
     velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
     est laborum.
   </Modal>
 );
};

Ele tem um gancho personalizado, useGlobalModalContext, que fornece um objeto de armazenamento de onde você pode acessar todos os adereços e as funções showModal e hideModal. Você pode fechar o modal usando a função hideModal.

Para excluir um modal, crie um arquivo chamado DeleteModal.tsx:

import React from "react";
import { Modal, ModalVariant, Button } from "@patternfly/react-core";
import { useGlobalModalContext } from "../GlobalModal";

export const DeleteModal = () => {
 const { hideModal } = useGlobalModalContext();

 const handleModalToggle = () => {
   hideModal();
 };

 return (
   <Modal
     variant={ModalVariant.medium}
     title="Delete Modal"
     isOpen={true}
     onClose={handleModalToggle}
     actions={[
       <Button key="confirm" variant="primary" onClick={handleModalToggle}>
         Confirm
       </Button>,
       <Button key="cancel" variant="link" onClick={handleModalToggle}>
         Cancel
       </Button>
     ]}
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
     commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
     velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
     est laborum.
   </Modal>
 );
};

Para atualizar um modal, crie um arquivo chamado UpdateModal.tsx e adicione este código:

import React from "react";
import { Modal, ModalVariant, Button } from "@patternfly/react-core";
import { useGlobalModalContext } from "../GlobalModal";

export const UpdateModal = () => {
 const { hideModal } = useGlobalModalContext();

 const handleModalToggle = () => {
   hideModal();
 };

 return (
   <Modal
     variant={ModalVariant.medium}
     title="Update Modal"
     isOpen={true}
     onClose={handleModalToggle}
     actions={[
       <Button key="confirm" variant="primary" onClick={handleModalToggle}>
         Confirm
       </Button>,
       <Button key="cancel" variant="link" onClick={handleModalToggle}>
         Cancel
       </Button>
     ]}
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
     veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
     commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
     velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
     est laborum.
   </Modal>
 );
};

3. Integre o GlobalModal ao componente de nível superior da sua aplicação

Para integrar a nova estrutura modal que você criou em seu aplicativo, basta importar a classe modal global que você criou. Aqui está meu exemplo de arquivo App.tsx :

import "@patternfly/react-core/dist/styles/base.css";
import "./fonts.css";
import { GlobalModal } from "./components/GlobalModal";
import { AppLayout } from "./AppLayout";

export default function App() {
 return (
   <GlobalModal>
     <AppLayout />
   </GlobalModal>
 );
}

App.tsx é o componente de nível superior do seu aplicativo, mas você pode adicionar outro componente de acordo com a estrutura do seu aplicativo. No entanto, certifique-se de que esteja um nível acima de onde você deseja acessar os modais.

GlobalModal é o componente de nível raiz onde todos os seus componentes modais são importados e mapeados com seu modalType específico.

4. Selecione o botão do modal no componente AppLayout

Adicionando um botão ao seu modal com AppLayout.js:

import React from "react";
import { Button, ButtonVariant } from "@patternfly/react-core";
import { useGlobalModalContext, MODAL_TYPES } from "./components/GlobalModal";

export const AppLayout = () => {
 const { showModal } = useGlobalModalContext();

 const createModal = () => {
   showModal(MODAL_TYPES.CREATE_MODAL, {
     title: "Create instance form",
     confirmBtn: "Save"
   });
 };

 const deleteModal = () => {
   showModal(MODAL_TYPES.DELETE_MODAL);
 };

 const updateModal = () => {
   showModal(MODAL_TYPES.UPDATE_MODAL);
 };

 return (
   <>
     <Button variant={ButtonVariant.primary} onClick={createModal}>
       Create Modal
     </Button>
     <br />
     <br />
     <Button variant={ButtonVariant.primary} onClick={deleteModal}>
       Delete Modal
     </Button>
     <br />
     <br />
     <Button variant={ButtonVariant.primary} onClick={updateModal}>
       Update Modal
     </Button>
   </>
 );
};

Existem três botões no componente AppLayout: criar modal, excluir modal e atualizar modal. Cada modal é mapeado com o modalType correspondente: CREATE_MODAL, DELETE_MODAL ou UPDATE_MODAL.

Use caixas de diálogo globais

Os modais globais são uma maneira limpa e eficiente de lidar com diálogos no React. Eles também são mais fáceis de manter a longo prazo. Na próxima vez que você montar um projeto, lembre-se dessas dicas.

Se você quiser ver o código em ação, incluí o aplicativo completo que criei para este artigo em uma sandbox.