Introduction
Modals are an essential part of web applications, providing a way to display content over the current page without navigating away. This guide will walk you through the steps to create a modal in React, including how to use the React Portal for rendering modals and managing their visibility with state. By the end of this tutorial, you’ll be able to implement modals that can open various elements dynamically.
Prerequisites
Before we dive into the code, make sure you have a basic understanding of React and functional components. Familiarity with hooks (useState, useEffect) will be beneficial.
Step 1: Setting Up the Project
First, create a new React project or navigate to your existing project:
cd react-modal-tutorial
npm start
Step 2: Creating the Modal Component
Create a new file ModalPortal.js and add the following code:
import ReactDOM from ‘react-dom’;
const ModalPortal = ({ open, children }) => {
useEffect(() => {
const rootElement = document.body;
if (open) {
rootElement.classList.add(‘overlay’);
} else {
rootElement.classList.remove(‘overlay’);
}
}, [open]);
if (!open) return null;
return ReactDOM.createPortal(
<div className=”modalContent”>{children}</div>,
document.body
);
};
export default ModalPortal;
Step 3: Styling the Modal
In your index.css or a separate CSS file, add the following styles:
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
width: 100%;
max-width: 500px;
z-index: 300;
overflow-y: auto;
overflow-x: hidden;
}
@media (max-width: 550px) {
.modalContent {
left: 15px;
right: 15px;
}
}
.overlay {
overflow: hidden;
}
@screen maxLg {
.overlay {
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
position: fixed;
}
.overlay::before {
content: “”;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
.overlay:before {
content: “”;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 200;
backdrop-blur: 6px;
}
Step 4: Implementing the Modal in Your Component
Create a component, App.js, and use the ModalPortal to open a modal with some content:
import ModalPortal from ‘./ModalPortal’;
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const handleOpenModal = () => setIsModalOpen(true);
const handleCloseModal = () => setIsModalOpen(false);
return (
<div>
<button onClick={handleOpenModal}>Open Modal</button>
<ModalPortal open={isModalOpen}>
<div className=”modalContent”>
<h2>Modal Title</h2>
<p>This is the modal content.</p>
<button onClick={handleCloseModal}>Close</button>
</div>
</ModalPortal>
</div>
);
};
export default App;
Step 5: Dynamically Rendering Elements in the Modal
To render different elements dynamically in the modal, you can pass the content as children to the ModalPortal component:
import ModalPortal from ‘./ModalPortal’;
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalContent, setModalContent] = useState(null);
const handleOpenModal = (content) => {
setModalContent(content);
setIsModalOpen(true);
};
const handleCloseModal = () => setIsModalOpen(false);
return (
<div>
<button onClick={() => handleOpenModal(<p>Content 1</p>)}>Open Modal with Content 1</button>
<button onClick={() => handleOpenModal(<p>Content 2</p>)}>Open Modal with Content 2</button>
<ModalPortal open={isModalOpen}>
<div className=”modalContent”>
<h2>Modal Title</h2>
{modalContent}
<button onClick={handleCloseModal}>Close</button>
</div>
</ModalPortal>
</div>
);
};
export default App;
Conclusion
In this tutorial, we’ve covered how to create a modal in React using React Portal and manage its state with hooks. We’ve also learned how to dynamically render different elements within the modal. With these techniques, you can enhance the user experience of your web application by incorporating interactive and dynamic modals. Happy coding!
Additional Resources
1. React Documentation
2. CSS Tricks for Modals
3. React Portals
