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 eficiente 🤩 desde cero sin usar ninguna biblioteca. componente Modal 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, , así que asegúrese de haber instalado el paquete node-sass. Para instalarlo hazlo, usaré Sass 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" Modal < > button </ > button /div> Cree un estado para abrir y cerrar modal. Escribe debajo del 👇 código: { useState } ; ; { [modal, setModal] = useState( ); Toggle = setModal(!modal); ( <button className="clickme" onClick={() => Toggle()}> Modal </button> ); } App; import from "react" import "./App.scss" ( ) function App const false const => () return < = > div className "App" </ > div export default contiene un estado modal que inicialmente es falso. Línea 6: un método Toggle para alternar el estado modal de falso a verdadero y viceversa. Línea 7: asegúrese de conectarse método para hacer clic en el botón. Línea 11: Toggle() A continuación, cree el archivo y escriba debajo del código 👇: Modal.js Modal = { ( ); }; Modal; const => () return Modal < > div </ > div export default Ahora impórtelo en el archivo Modal in App.js. Aquí hemos importado el componente `Modal`. Y pasó el estado modal como se muestra en los accesorios. Línea 17: Ahora abre y escribe el código debajo 👇 Modal.js Close ; Modal = { ( <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; import from "./times-solid.svg" const ( ) => { show } return { show ? <> Deconstruir Show de los accesorios. Línea 3: mostraremos el modal solo cuando el estado de la demostración sea verdadero. Línea 7: Este es todo el . Modal Container div contiene el modal. Línea 9 a 30: diseño Modal En el div modal, hay un encabezado que contiene el y el botón de (puede usar cualquier icono para el botón de cierre). título modal cierre La etiqueta principal contiene el del modal. contenido El pie de página tiene 2 botones, uno se y otro se . envía 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 e impórtelo en el archivo . Modal.scss Modal.js Copie y pegue este estilo en el archivo . Modal.scss Esto le dará a tu modal una mejor apariencia. Al aplicar este puedes hacer que parezca vidrio helado. Línea 21: backdrop-filter Agreguemos el evento Cerrar en modal En el archivo , pase el método de alternar como accesorios en el modal así 👇 App.js <Modal show={modal} title= close={Toggle}/> "My Modal" abra el archivo y deconstruya el cierre de los accesorios. Modal.js Close ; Modal = { ( <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; import from "./times-solid.svg" const ( ) => { show, close } return { show ? <> Deconstruir Cerrar desde los accesorios. Línea 3: Hemos agregado el método de cierre en 3 lugares: En el botón de cerrar. Línea 16: En el botón cancelar. Línea 22: : 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 11 aquí tenemos que detener estos eventos de clic en el modal; de lo contrario, lo cerrará, por lo que hemos usado e.stopPropagation(). Línea 13: 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) sugerencia: 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 o 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. overflow z-index ⏩ La sintaxis✍ para crear un portal👇 ReactDOM.createPortal ( element, DOM node where you want to render element ) this 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 y edítelo así, Modal.js ReactDOM ; ; Close ; Modal = { ReactDOM.createPortal( <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; import from "react-dom" import "./modal.scss" import from "./times-solid.svg" const ( ) => { show, close } return { show ? <> Importar ReactDom. Línea 1: Después de regresar crea un portal usando , 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 6: ReactDom.createPortal Queremos representar nuestro componente en el div con id modal. Línea 34: Hagamos que el contenido modal sea dinámico: abra el archivo y pase el título como accesorio y contenido dentro del componente como se muestra a continuación, App.js <Modal show={modal} title= close={Toggle}> This is Modal content < "My Modal" /Modal> Aquí hemos pasado el título como utilería y contenido modal como los niños. Abra y escriba, Modal.js (Código Modal.js final) Deconstruir y de los accesorios. Línea 5: title children Inserte título entre llaves. Línea 17: Renderice niños usando las llaves. Línea 22: 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

YouTube

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

Componente modal personalizado de ReactJS usando ganchos y portales

Demasiado Largo; Para Leer

Companies Mentioned

@codebucks

HISTORIAS RELACIONADAS