Create simple Popup in ReactJS
Today we’ll show you how to create simple popup in ReactJS without the help of the npm packages. You can use it to implement Confirmation box, email subscription notifications and display advertisements etc.
Create Simple Popup Example In React Application, Create modal popup in React JS. Simple react popup example, react popup window example, react confirmation popup, Implementing a Simple Modal Component in React, How do I create a popup window in react.js when the button and function are in separate file?
Checkout more articles on ReactJS
Basically, the idea is to provide the popup screen with the help of the pure HTML and CSS in ReactJS.
Way to create simple popup in ReactJS
1. Set up React application
Let’s start with creating the simple react application with the help of the create-react-app. If you don’t know about how to create a react application then refer the below link.
2. Create popup component
In the second step, we’ll create a separate component for the popup and design it. You can modify it based on your theme.
Popup.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | import React from "react"; const Popup = props => { return ( <div className="popup-box"> <div className="box"> <span className="close-icon" onClick={props.handleClose}>x</span> {props.content} </div> </div> ); }; export default Popup; |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* Popup style */ .popup-box { position: fixed; background: #00000050; width: 100%; height: 100vh; top: 0; left: 0; } .box { position: relative; width: 70%; margin: 0 auto; height: auto; max-height: 70vh; margin-top: calc(100vh - 85vh - 20px); background: #fff; border-radius: 4px; padding: 20px; border: 1px solid #999; overflow: auto; } .close-icon { content: 'x'; cursor: pointer; position: fixed; right: calc(15% - 30px); top: calc(100vh - 85vh - 33px); background: #ededed; width: 25px; height: 25px; border-radius: 50%; line-height: 20px; text-align: center; border: 1px solid #999; font-size: 20px; } |
3. Handle the Popup
Now, it’s time to manage the popup component using the state variable. So for that you have to use state variable and create toggle method to manage the show/hide of the popup component. Also we need to pass the toggle method inside the popup component so we can manage the click event of the close button.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import React, { useState } from 'react'; import Popup from './Popup'; function App() { const [isOpen, setIsOpen] = useState(false); const togglePopup = () => { setIsOpen(!isOpen); } return <div> <input type="button" value="Click to Open Popup" onClick={togglePopup} /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> {isOpen && <Popup content={<> <b>Design your Popup</b> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <button>Test button</button> </>} handleClose={togglePopup} />} </div> } export default App; |
4. Output
Run the project and check the output.
Thank you for reading!
Hi, I’ve found this post and I’m wondering, suppose you have a form with a node inside. This node has a button that opens a popup window, and I need to pass the id of the node to the popup window. How should I do that? What’s the best way to do it?
Regards,
Nahuel
Hi Nahuel,
All I can understand is that you want to pass the id from the component to the popup. Therefore you can use the props to transfer data in the popup window.
Thanks for your answer, I figured out by myself at the end 🙂 was like you said, I used the props to transfer the data.
Regards,
Nahuel
Great!
Feel free to share your queries.
Subscribe us for weekly updates or like and follow us for regular updates.
Hi suppose you have a wall with multiple user post and you wish to show a popup when you click user profile icon or name. What CSS will be used at that point.
Hi Anamika,
It’s all up to you but I would suggest you to use the standard popup CSS throughout the project.
Hi, thank you for this simple tutorial.
How can I use a popup Component like yours that stop js execution until users interaction?
In my case I need a popup with 2 buttons (that I have rendered correctly according to your tutorial) but the execution should be paused until
user push one of two buttons and the execution shall continue according to user choice.
I’m trying many way but without success, can you help me?
Hi Danilo, What kind of JS execution would you like to prevent?
Is it possible to share Stackblitz link?
Hi,
Thanks for this tutorial.
I need multiple popup generates based on an array of content. I am passing content through the component with props but the same content is showing up on all the popups. How can i handle multiple popups with different data per popup?
Hi Leroy, Is it possible to share the StackBlitz sample code link with us? So we can help you.
THis is the mapping function but for every article here the content needs to be different in the popup.
{
pastEvents.map((article, index) => {
console.log(article)
return (
{isOpen && <Popup
content={
{article.event_date}
{article.event_lineup[0].text}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Test button
}
handleClose={togglePopup}
/>}
)
})
}
Hi Leroy, Your implementation is wrong. You have to take a separate flag for each article to manage (show/hide) popup. You can set the
isOpenflag within the article object.wHAT TO DO IF A WANT A POP UP AT THE BEGINNING AUTOMATIC POP UP OPENING THE WESITE?
You have to set flag as a
trueonuseEffect(() => { }, [])(On component mount).