As janelas modais são um elemento de interface do usuário comum em aplicativos da web. Eles são usados ​​para exibir informações importantes, solicitar entrada do usuário ou confirmar uma ação. Embora as janelas modais possam ser úteis, elas também podem ser difíceis de gerenciar, especialmente se você tiver vários modais em sua página.

Neste artigo, mostraremos como criar um useModalgancho no React que simplifica a criação e o gerenciamento de janelas modais. Com esse gancho, você pode facilmente abrir e fechar modais, passar dados para eles e lidar com as interações do usuário.

Criando o useModalGancho

Para criar o useModalgancho, usaremos o useStategancho do React para gerenciar o estado do modal. O useStategancho retorna um array com dois itens: o valor do estado atual e uma função para atualizar o valor do estado.

Aqui está o código para o useModalgancho:

import { useState } from 'react';

function useModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalContent, setModalContent] = useState(null);

  function openModal(content) {
    setModalContent(content);
    setIsModalOpen(true);
  }

  function closeModal() {
    setModalContent(null);
    setIsModalOpen(false);
  }

  return {
    isModalOpen,
    openModal,
    closeModal,
    modalContent,
  };
}

• isModalOpen: um booleano que indica se o modal está aberto no momento.
• openModal: uma função que recebe um contentargumento e define o modalContentestado para ele, bem como define isModalOpencomo true.
• closeModal: uma função que define modalContentcomo nulle define isModalOpencomo false.
• modalContent: o conteúdo do modal.

Agora que temos o useModalgancho, podemos usá-lo para criar e gerenciar modais em nossos componentes React.

Aqui está um componente de exemplo que usa o useModalgancho:

import { useState } from 'react';
import useModal from './useModal';

function App() {
  const [data, setData] = useState(null);
  const { isModalOpen, openModal, closeModal, modalContent } = useModal();

  function handleButtonClick() {
    setData('example data');
    openModal(<Modal onClose={closeModal} data={data} />);
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Open Modal</button>
      {isModalOpen && modalContent}
    </div>
  );
}

function Modal({ onClose, data }) {
  function handleConfirm() {
    console.log('Confirmed with data:', data);
    onClose();
  }

  return (
    <div>
      <h2>Modal Content</h2>
      <p>Data: {data}</p>
      <button onClick={onClose}>Cancel</button>
      <button onClick={handleConfirm}>Confirm</button>
    </div>
  );
}

O componente `Modal recebe duas props: onClosee data. onCloseé uma função que será chamada quando o usuário clicar no botão "Cancelar" ou no botão "Confirmar". datasão os dados que foram definidos na handleButtonClickfunção.

O Modalcomponente exibe o conteúdo da janela modal, incluindo os dados passados ​​como prop. Também inclui um botão "Cancelar" e um botão "Confirmar". Quando o usuário clica no botão "Cancelar", a onClosefunção é chamada, que fechará a janela modal. Quando o usuário clica no botão "Confirmar", a handleConfirmfunção é chamada, que registra os dados no console e depois chama onClosepara fechar a janela modal.

Por fim, no Appcomponente, renderizamos um botão que abre o modal quando clicado e renderizamos condicionalmente o modal verificando se isModalOpené verdadeiro e renderizando o modalContentno DOM.

Conclusão

Neste artigo, mostramos como criar um useModalgancho no React que simplifica a criação e o gerenciamento de janelas modais. Com esse gancho, você pode facilmente abrir e fechar modais, passar dados para eles e lidar com as interações do usuário.

O useModalgancho pode ser personalizado para atender às suas necessidades específicas. Por exemplo, você pode adicionar mais variáveis ​​de estado para rastrear diferentes tipos de modais ou adicionar funções adicionais para lidar com interações específicas do usuário.

Usando o useModalgancho, você pode tornar seu código React mais limpo e organizado e evitar a complexidade de gerenciar modais diretamente em seus componentes. Esperamos que este artigo tenha sido útil e que você ache o useModalgancho útil em seus projetos React.