Creating an Efficient Modal Component in React using Hooks and Portals

In this article we’re going to create an efficient Modal component🤩 from scratch without using any library.
Demo Link🖤: Modal using React Portals
Our main goal is to create an efficient modal which,
- Has a good layout
- Doesn’t break ui when we use overflow in 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.
If you prefer video format then you can watch this video 📽👇
Let’s get started!
Setting Up The Project
Create your React App using,
npx create-react-app react-modal
For this tutorial i’m going to use Sass
so make sure you have installed node-sass
package. To install it do,
npm install node-sass
Setting up the basic Modal structure
Open the App.js
file and clean🧹 unnecessary code. Now let’s create one button in the App.js
file to open and close modal just like given in the following code 👇
<div className="App">
<button>Modal</button>
</div>
Let’s create one state to open and close modal. Write the following 👇 code:
1import { useState } from "react";
2import "./App.scss";
3
4function App() {
5
6 const [modal, setModal] = useState(false);
7 const Toggle = () => setModal(!modal);
8
9 return (
10 <div className="App">
11 <button className="clickme" onClick={() => Toggle()}>
12 Modal
13 </button>
14 </div>
15 );
16}
17
18export default App;
19
Line 6: This line contains modal
state which is false initially.
Line 7: A Toggle
method to toggle modal
state from false to
true and vice-versa.
Line 11: Make sure to connect Toggle()
method to onClick
of the button.
Next create Modal.js
file and Write the following 👇 code:
const Modal = () => {
return (
<div>
Modal
</div>
);
};
export default Modal;
Now let’s import Modal
in the App.js
file.
1import { useState } from "react";
2import "./App.scss";
3import Modal from "./Components/Modal";
4
5function App() {
6
7 const [modal, setModal] = useState(false);
8 const Toggle = () => setModal(!modal);
9
10 return (
11 <div className="App">
12 <button className="clickme" onClick={() => Toggle()}>
13 Modal
14 </button>
15 <Modal show={modal} />
16 </div>
17 );
18}
19
20export default App;
21
Line 17: Here we have imported Modal
component. And passed modal
state as show
in the props.
Now open Modal.js
and add the following code 👇
1import Close from "./times-solid.svg";
2
3const Modal = ({ show }) => {
4 return (
5 <>
6 {
7 show ?
8
9 <div
10 className="modalContainer"
11 >
12 <div className="modal" >
13 <header className="modal_header">
14 <h2 className="modal_header-title"> Modal Title </h2>
15 <button className="close" >
16 <img src={Close} alt="close" />
17 </button>
18 </header>
19 <main className="modal_content">
20 This is Modal Content
21 </main>
22 <footer className="modal_footer">
23 <button className="modal-close" >
24 Cancel
25 </button>
26
27 <button className="submit">Submit</button>
28 </footer>
29 </div>
30 </div>
31 : null
32 }
33 </>
34 );
35};
36
37export default Modal;
38
Line 3: Deconstruct show
from the props.
Line 7: We will display modal only when show
state is true.
Line 9 to 30: This is the whole Modal layout
.
ModalContainer
div contains the modal- In the modal div, There is one header which contains
modal title
andclose
Button (You can use any icon for close button). Main
tag containscontent
of the modal.- Footer has 2 buttons one is
submit
and another iscancel
.
Styling The Modal
Now when you press a button, the modal will show and on pressing again it will close the modal. First Let’s add some styling to our modal. Create Modal.scss
file and import it in the Modal.js
file. Copy and paste the following styles in the Modal.scss
file.
.modalContainer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($color: #000000, $alpha: 0.35);
display: flex;
justify-content: center;
align-items: center;
.modal {
width: 30vw;
height: auto;
background-color: #fff;
padding: 2rem;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(5px);
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
&_header {
position: relative;
border-bottom: 1px solid #dddddd;
&-title {
text-align: center;
}
.close {
position: absolute;
top: 0;
right: 0;
background: transparent;
img {
width: 1rem;
height: auto;
transition: all 0.3s;
}
&:hover {
img {
transform: scale(1.1);
}
}
}
}
&_content {
border-bottom: 1px solid #dddddd;
padding: 2rem 0;
}
&_footer {
padding: 2rem 0;
padding-bottom: 0;
button {
float: right;
padding: 0.5rem;
border-radius: 8px;
}
.modal-close {
background-color: transparent;
font-weight: 600;
&:hover {
color: rgba(54, 67, 72, 0.8);
}
}
.submit {
margin-right: 1rem;
background-color: #364348;
color: #fff;
&:hover {
background-color: rgba(54, 67, 72, 0.8);
}
}
}
}
}
This will give your modal a better look. Also, by applying the backdrop-filter
you can make it look like frost-glass.
Adding a Close Event in Modal
In the App.js
file pass toggle
method as a props in the modal just like the following line 👇
<Modal show={modal} title="My Modal" close={Toggle} />
open Modal.js
file and deconstruct close
from the props.
1import Close from "./times-solid.svg";
2
3const Modal = ({ show, close }) => {
4 return (
5 <>
6 {
7 show ?
8
9 <div
10 className="modalContainer"
11 onClick={() => close()}
12 >
13 <div className="modal" onClick={(e) => e.stopPropagation()}>
14 <header className="modal_header">
15 <h2 className="modal_header-title">Modal Title</h2>
16 <button className="close" onClick={() => close()}>
17 <img src={Close} alt="close" />
18 </button>
19 </header>
20 <main className="modal_content">This is modal content</main>
21 <footer className="modal_footer">
22 <button className="modal-close" onClick={() => close()}>
23 Cancel
24 </button>
25
26 <button className="submit">Submit</button>
27 </footer>
28 </div>
29 </div>
30 : null
31 }
32 </>
33 );
34};
35
36export default Modal;
37
Line 3: Deconstruct close
from the props.
We have added close method in 3 places:
Line 16: At the close
button.
Line 22: At the cancel
button.
Line 11: We have also added close
method here too. Why? because whenever user clicks outside it should close the modal. So here, when user clicks on the modalContainer
it closes the modal.
Line 13: here we have to stop this click
events in the modal else it will close it so for that we have used e.stopPropagation()
.
hint: 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)
Using Portals to render the Modal
What🧐 is 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
overflow
orz-index
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.
Syntax✍ for to create portal👇
ReactDOM.createPortal
(element, DOM node where you want to render this element)
So let’s implement portals in our Modal
component. To use portal
we have to create one more element in the dom. Generally our whole App
renders in the div with the id root.
Open index.html
file and above the root div
create one more div
with the id modal.
Just like the following code block👇
<div id="modal" />
<div id="root" />
Let’s update the ‘Modal.js’ file.
1import ReactDOM from "react-dom";
2import "./modal.scss";
3import Close from "./times-solid.svg";
4
5const Modal = ({ show, close }) => {
6 return ReactDOM.createPortal(
7 <>
8 {
9 show ?
10
11 <div
12 className="modalContainer"
13 onClick={() => close()}
14 >
15 <div className="modal" onClick={(e) => e.stopPropagation()}>
16 <header className="modal_header">
17 <h2 className="modal_header-title">Modal Title</h2>
18 <button className="close" onClick={() => close()}>
19 <img src={Close} alt="close" />
20 </button>
21 </header>
22 <main className="modal_content">This is modal content</main>
23 <footer className="modal_footer">
24 <button className="modal-close" onClick={() => close()}>
25 Cancel
26 </button>
27
28 <button className="submit">Submit</button>
29 </footer>
30 </div>
31 </div>
32 : null
33 },
34 document.getElementById("modal")
35 </>
36 );
37};
38
39export default Modal;
40
Line 1: let’s import ReactDom
.
Line 6: After return let’s create portal using ReactDom.createPortal
, As it’s first argument we have passed whole modal component and for the second argument we have passed the dom node where we want to render it.
Line 34: We want to render our component in the div
with id modal.
Adding dynamic content to the Modal
open App.js
file and pass title
as a props and content inside the component as shown below,
<Modal show={modal} title="My Modal" close={Toggle}>
This is Modal content
</Modal>
Here we have passed title as props and modal content as the children. Here is the final code for modal component.
1import ReactDOM from "react-dom";
2import "./modal.scss";
3import Close from "./times-solid.svg";
4
5const Modal = ({ show, close, title, children }) => {
6 return ReactDOM.createPortal(
7 <>
8 {
9 show ?
10
11 <div
12 className="modalContainer"
13 onClick={() => close()}
14 >
15 <div className="modal" onClick={(e) => e.stopPropagation()}>
16 <header className="modal_header">
17 <h2 className="modal_header-title"> {title} </h2>
18 <button className="close" onClick={() => close()}>
19 <img src={Close} alt="close" />
20 </button>
21 </header>
22 <main className="modal_content"> {children} </main>
23 <footer className="modal_footer">
24 <button className="modal-close" onClick={() => close()}>
25 Cancel
26 </button>
27
28 <button className="submit">Submit</button>
29 </footer>
30 </div>
31 </div>
32 : null
33 },
34 document.getElementById("modal")
35 </>
36 );
37};
38
39export default Modal;
40
Line 5: Let’s deconstruct title
and children
from the props.
Line 17: Here, insert title in the curly braces.
Line 22: Let’s render the children using the curly braces.
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.
Full code for this tutorial👉 create Modal using React Portals