Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn't behave as it should. It must have good UI/UX. In this article, we're going to create an efficient 🤩 from scratch without using any library. Modal component Demo Link🖤: https://react-reusable-components.vercel.app/ Our main goal is to create an efficient modal which, Has a good layout Doesn't break ui when we use overflow in the parent component Can render content Dynamically Clean and Elegant animation Looks good (good UI) Have more control for User (like clicking outside can close modal) etc. Let’s get started! If you prefer video format then you can watch this video 📽👇 Create your react-app using, npx create-react-app react-modal For this tutorial, I'm going to use so make sure you have installed node-sass package. To install it do, Sass npm install node-sass Let's create a Basic Modal component open App.js file. clean🧹 unnecessary code. Now create one button in the App.js file to open and close modal just like this 👇 </div> <div className= "App" > < button > Modal </ button > Create one state to open and close modal. Write below 👇 code: );
} 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; Contains modal state which is false initially. Line 6: A Toggle method to toggle modal state from false to true and vice-versa. Line 7: Make sure to connect method to onClick of the button. Line 11: Toggle() Next, create file and Write below 👇 code: Modal.js );
}; const Modal = () => { return ( < div > Modal </ div > export default Modal; Now import it in the Modal in file. App.js Here we have imported `Modal` component. And passed 
modal state as shown in the props. Line 17: Now open and write below code 👇 Modal.js );
}; 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; Deconstruct Show from the props. Line 3: We will display the modal only when the show state is true. Line 7: This is the whole .
 Modal Container div contains the modal. Line 9 to 30: Modal layout In the modal div, There is one header that contains the and Button (You can use any icon for the close button). modal title close The main tag contains the of the modal. content Footer has 2 buttons one is and another is . submitted canceled Now when you press a button modal will show and on pressing again it will close the modal. First Let's add some styling to our modal. Create a file and import it in the file. Modal.scss Modal.js Copy and paste this styling in the file. Modal.scss This will give your modal a better look. By applying this you can make it 
look like frost-glass. Line 21: backdrop-filter Let's add Close event in modal In the file pass toggle method as props in the modal just like this 👇 App.js <Modal show={modal} title= "My Modal" close={Toggle}/> open file and deconstruct close from the props. Modal.js );
}; 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; Deconstruct Close from the props. Line 3: We have added close method in 3 places: At the close button. Line 16: At the cancel button. Line 22: : We have also added a close method here too. Why? because whenever the user clicks outside it should close the modal. So here, when the user clicks on the modalContainer it closes the modal. Line 11 here we have to stop these click events in the modal else it will close it so for that we have used e.stopPropagation(). Line 13: You can also add event Listener and add functionality 
in which when user clicks esc key, It closes the modal. (It is good for user experience) hint: Let's use Portals to render the Modal component ⏩ What🧐 are ? portals Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ⏩ Why🤔 should we use portals? Sometimes when we use or properties in the parent component then we need child component (like modal or dialogues) to break container visually, and portals can be very handy to do that because it renders children outside of DOM hierarchy. overflow z-index ⏩ The syntax✍ for to create a portal👇 ( 
element, ) ReactDOM.createPortal DOM node where you want to render this element So let's implement portals in our Modal component. To use the portal we have to create one more element in the dom. Generally, our whole App renders in the div with the id root. Open file. index.html and above the root div create one more div with the id . modal Just like this 👇 <div id= "modal" /> < div id = "root" /> Open file and edit it just like this, Modal.js );
}; 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; Import ReactDom. Line 1: After return creates a portal using , As it's the first argument we have passed the whole modal component and for the second argument we have passed the dom node where we want to render it. Line 6: ReactDom.createPortal We want to render our component in the div with id modal. Line 34: Let's make Modal content Dynamic: open file and pass title as a prop and content inside the component as shown below, App.js This is Modal content
</Modal> <Modal show={modal} title= "My Modal" close={Toggle}> Here we have passed the title as props and modal content as the children. Open and write, Modal.js (Final Modal.js code) Deconstruct and from the props. Line 5: title children Insert title in the curly braces. Line 17: Render children using the curly braces. Line 22: Now if you want to add a little animation in the modal you can watch the video or you can go to the git repository and read📚 code. Thanks For Reading😄 Feel free to visit my youtube channel: @CodeBucks

YouTube

CodeBucks, #Noonies2021 Nominee: I would not invest in cryptocurrency 

A Tutorial for Todo Apps using React, Redux and Framer-Motion

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

2021 - HackerNoon Contributor of the Year - CSS3

Too Long; Didn't Read

Make resilience your competitive advantage

ReactJS Custom Modal Component using Hooks and Portals

ReactJS Custom Modal Component using Hooks and Portals

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Tutorial for Todo Apps using React, Redux and Framer-Motion

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

A Tutorial for Todo Apps using React, Redux and Framer-Motion

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps