Las ventanas modales son un elemento común de la interfaz de usuario en las aplicaciones web. Se utilizan para mostrar información importante, solicitar información del usuario o confirmar una acción. Si bien las ventanas modales pueden ser útiles, también pueden ser difíciles de administrar, especialmente si tiene varias ventanas modales en su página.

En este artículo, le mostraremos cómo crear un useModalgancho en React que simplifique la creación y administración de ventanas modales. Con este gancho, puede abrir y cerrar fácilmente modales, pasarles datos y manejar las interacciones de los usuarios.

Crear el useModalgancho

Para crear el useModalgancho, usaremos el useStategancho de React para administrar el estado del modal. El useStategancho devuelve una matriz con dos elementos: el valor del estado actual y una función para actualizar el valor del estado.

Aquí está el código para el 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: un valor booleano que indica si el modal está actualmente abierto.
• openModal: una función que toma un contentargumento y establece el modalContentestado en él, así como establece isModalOpenen true.
• closeModal: una función que se establece modalContenten nully se establece isModalOpenen false.
• modalContent: el contenido del modal.

Ahora que tenemos el useModalgancho, podemos usarlo para crear y administrar modales en nuestros componentes de React.

Aquí hay un componente de ejemplo que usa el 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>
  );
}

El componente `Modal recibe dos apoyos: onClosey data. onClosees una función que se llamará cuando el usuario haga clic en el botón "Cancelar" o en el botón "Confirmar". datason los datos que se establecieron en la handleButtonClickfunción.

El Modalcomponente muestra el contenido de la ventana modal, incluidos los datos pasados ​​como accesorio. También incluye un botón "Cancelar" y un botón "Confirmar". Cuando el usuario hace clic en el botón "Cancelar", onClosese llama a la función, que cerrará la ventana modal. Cuando el usuario hace clic en el botón "Confirmar", handleConfirmse llama a la función, que registra los datos en la consola y luego llama onClosepara cerrar la ventana modal.

Finalmente, en el Appcomponente, representamos un botón que abre el modal cuando se hace clic, y condicionalmente representamos el modal verificando si isModalOpenes verdadero y representando modalContenten el DOM.

Conclusión

En este artículo, le mostramos cómo crear un useModalgancho en React que simplifica la creación y administración de ventanas modales. Con este gancho, puede abrir y cerrar fácilmente modales, pasarles datos y manejar las interacciones de los usuarios.

El useModalgancho se puede personalizar para adaptarse a sus necesidades específicas. Por ejemplo, puede agregar más variables de estado para rastrear diferentes tipos de modales o agregar funciones adicionales para manejar interacciones específicas del usuario.

Al usar el useModalgancho, puede hacer que su código React sea más limpio y organizado, y evitar la complejidad de administrar modales directamente en sus componentes. Esperamos que este artículo haya sido útil y que encuentre el useModalenlace útil en sus proyectos de React.