Componente modal personalizado de ReactJS usando ganchos y portales

Modal es un elemento UX común. Un modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual. Debe haber utilizado ventanas emergentes y notificaciones para su sitio web. Para algunas personas, las ventanas emergentes son realmente molestas si no se comportan como deberían. Debe tener una buena UI/UX.

En este artículo, vamos a crear un componente Modal eficiente 🤩 desde cero sin usar ninguna biblioteca.

Enlace de demostración🖤: https://react-reusable-components.vercel.app/

Nuestro principal objetivo es crear un modal eficiente que,

• Tiene un buen diseño
• No rompe la interfaz de usuario cuando usamos el desbordamiento en el componente principal
• Puede representar contenido dinámicamente
• Animación limpia y elegante
• Se ve bien (buena interfaz de usuario)
• Tenga más control para el usuario (como hacer clic afuera puede cerrar modal), etc.

¡Empecemos!

Si prefiere el formato de video, puede ver este video 📽👇

Cree su aplicación de reacción usando,

 npx create-react-app react-modal

Para este tutorial, usaré Sass , así que asegúrese de haber instalado el paquete node-sass. Para instalarlo hazlo,

 npm install node-sass

Vamos a crear un componente modal básico

abra el archivo App.js.

clean🧹 código innecesario.

Ahora cree un botón en el archivo App.js para abrir y cerrar modal así 👇

 <div className= "App" > < button > Modal </ button > < /div>

Cree un estado para abrir y cerrar modal.

Escribe debajo del 👇 código:

 import { useState } from "react" ; import "./App.scss" ; function App ( ) { const [modal, setModal] = useState( false ); const Toggle = () => setModal(!modal); return ( < div className = "App" > <button className="clickme" onClick={() => Toggle()}> Modal </button> </ div > ); } export default App;

Línea 6: contiene un estado modal que inicialmente es falso.

Línea 7: un método Toggle para alternar el estado modal de falso a verdadero y viceversa.

Línea 11: asegúrese de conectarse

 Toggle()

A continuación, cree el archivo Modal.js y escriba debajo del código 👇:

 const Modal = () => { return ( < div > Modal </ div > ); }; export default Modal;

Ahora impórtelo en el archivo Modal in App.js.

Línea 17: Aquí hemos importado el componente `Modal`. Y pasó el estado modal como se muestra en los accesorios.

Ahora abre Modal.js y escribe el código debajo 👇

 import Close from "./times-solid.svg" ; const Modal = ( { show } ) => { return ( <> { show ? <div className="modalContainer" > <div className="modal" > <header className="modal_header"> <h2 className="modal_header-title"> Modal Title </h2> <button className="close" > <img src={Close} alt="close" /> </button> </header> <main className="modal_content"> This is Modal Content </main> <footer className="modal_footer"> <button className="modal-close" > Cancel </button> <button className="submit">Submit</button> </footer> </div> </div> : null } </> ); }; export default Modal;

Línea 3: Deconstruir Show de los accesorios.

Línea 7: mostraremos el modal solo cuando el estado de la demostración sea verdadero.

Línea 9 a 30: Este es todo el diseño Modal . Modal Container div contiene el modal.

• En el div modal, hay un encabezado que contiene el título modal y el botón de cierre (puede usar cualquier icono para el botón de cierre).
• La etiqueta principal contiene el contenido del modal.
• El pie de página tiene 2 botones, uno se envía y otro se cancela .

Ahora, cuando presione un botón, se mostrará modal y, al presionar nuevamente, cerrará el modal.

Primero, agreguemos algo de estilo a nuestro modal.

Cree un archivo Modal.scss e impórtelo en el archivo Modal.js .

Copie y pegue este estilo en el archivo Modal.scss .

Esto le dará a tu modal una mejor apariencia.

Línea 21: Al aplicar este

 backdrop-filter

Agreguemos el evento Cerrar en modal

En el archivo App.js , pase el método de alternar como accesorios en el modal así 👇

 <Modal show={modal} title= "My Modal" close={Toggle}/>

abra el archivo Modal.js y deconstruya el cierre de los accesorios.

 import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ( <> { show ? <div className="modalContainer" onClick={() => close()} > <div className="modal" onClick={(e) => e.stopPropagation()}> <header className="modal_header"> <h2 className="modal_header-title">Modal Title</h2> <button className="close" onClick={() => close()}> <img src={Close} alt="close" /> </button> </header> <main className="modal_content">This is modal content</main> <footer className="modal_footer"> <button className="modal-close" onClick={() => close()}> Cancel </button> <button className="submit">Submit</button> </footer> </div> </div> : null } </> ); }; export default Modal;

Línea 3: Deconstruir Cerrar desde los accesorios.

Hemos agregado el método de cierre en 3 lugares:

Línea 16: En el botón de cerrar.

Línea 22: En el botón cancelar.

Línea 11 : También hemos agregado un método de cierre aquí también. ¿Por qué? porque cada vez que el usuario hace clic fuera, debe cerrar el modal. Así que aquí, cuando el usuario hace clic en modalContainer, cierra el modal.

Línea 13: aquí tenemos que detener estos eventos de clic en el modal; de lo contrario, lo cerrará, por lo que hemos usado e.stopPropagation().

sugerencia: también puede agregar un detector de eventos y agregar una funcionalidad en la que cuando el usuario hace clic en la tecla esc, cierra el modal. (Es bueno para la experiencia del usuario)

Usemos Portals para renderizar el componente Modal.

⏩ ¿Qué🧐 son los portales ?

• Los portales brindan una forma de primera clase de representar elementos secundarios en un nodo DOM que existe fuera de la jerarquía DOM del componente principal.

⏩ ¿Por qué🤔 debemos usar portales?

• A veces, cuando usamos

   overflow

  o

   z-index

  properties en el componente principal, entonces necesitamos un componente secundario (como modal o diálogos) para dividir el contenedor visualmente, y los portales pueden ser muy útiles para hacerlo porque representan elementos secundarios fuera de la jerarquía DOM.

⏩ La sintaxis✍ para crear un portal👇

 ReactDOM.createPortal ( element, DOM node where you want to render this element )

Así que implementemos portales en nuestro componente Modal.

Para usar el portal tenemos que crear un elemento más en el dom.

En general, toda nuestra aplicación se representa en el div con la raíz de identificación.

Abra el archivo index.html .

y encima del div raíz, cree un div más con el id modal .

Solo así 👇

 <div id= "modal" /> < div id = "root" />

Abra el archivo Modal.js y edítelo así,

 import ReactDOM from "react-dom" ; import "./modal.scss" ; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ReactDOM.createPortal( <> { show ? <div className="modalContainer" onClick={() => close()} > <div className="modal" onClick={(e) => e.stopPropagation()}> <header className="modal_header"> <h2 className="modal_header-title">Modal Title</h2> <button className="close" onClick={() => close()}> <img src={Close} alt="close" /> </button> </header> <main className="modal_content">This is modal content</main> <footer className="modal_footer"> <button className="modal-close" onClick={() => close()}> Cancel </button> <button className="submit">Submit</button> </footer> </div> </div> : null }, document.getElementById("modal") </> ); }; export default Modal;

Línea 1: Importar ReactDom.

Línea 6: Después de regresar crea un portal usando ReactDom.createPortal , como es el primer argumento, hemos pasado todo el componente modal y para el segundo argumento hemos pasado el nodo dom donde queremos representarlo.

Línea 34: Queremos representar nuestro componente en el div con id modal.

Hagamos que el contenido modal sea dinámico:

abra el archivo App.js y pase el título como accesorio y contenido dentro del componente como se muestra a continuación,

 <Modal show={modal} title= "My Modal" close={Toggle}> This is Modal content < /Modal>

Aquí hemos pasado el título como utilería y contenido modal como los niños.

Abra Modal.js y escriba,

(Código Modal.js final)

Línea 5: Deconstruir

 title

 children

Línea 17: Inserte título entre llaves.

Línea 22: Renderice niños usando las llaves.

Ahora, si desea agregar una pequeña animación en el modal, puede ver el video o puede ir al repositorio de git y leer el código.

Gracias por leer 😄

Siéntase libre de visitar mi canal de youtube: @CodeBucks

También publicado en https://dev.to/codebucks/how-to-create-an-ficient-modal-component-in-react-using-hooks-and-portals-360p