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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

Toque para ganar: Telegram puede incorporar a los próximos 10 mil millones de usuarios de criptomonedas antes de Solana

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps