Before this, we created a modal popup using only Html and CSS. With it, I learned how to create different elements using the popup window. This reacts modal popup has to be opened manually by clicking on the button.
Simple Modal Popup in React Js
Model pop-ups are a common web element that we see on various websites. Every time we visit a web page we see such a pop-up after a certain period of time.
Although in that case automatic pop-ups are used. However, this react js modal popup example is not automatic. It has to be opened by clicking on the button.
See the Pen
Modal Popup in React JS by Shantanu Jana (@shantanu-jana)
Since this is a basic example of React modal, there is not much information here. The popup window contains some text and a cancel button. There is also a popup button which after clicking on it we will see a simple modal popup.
Create a Simple Modal Pop-up with React
Now we will learn how to create this react popup form. If you want to know step by step then follow the tutorial below. However, if you want, you can download all the code using the button below the article.
Step 1: HTML code of React Modal Popup
Step 2: CSS code of Popup window
We will design this project (modal popup in react js) using the following CSS codes. Although I haven’t created any elements yet. Basically, you have to use the following CSS to design the element that we will create in React.
Step 3: Activate Modal Popup by React Js
Now we will activate this simple modal popup by react js. Here I have given all the reactions together. Although I’ve tried to explain all the code here. If you know Basic React js then you will have no problem understanding these codes.
It creates a functional component called “Popup” which takes in a props object with a “trigger” property and a “setTrigger” function. It uses the “useState” Hook from React to manage the state of the popup.
The “Popup” component renders a div with a class of “popup” and a nested div with a class of “popup-inner” when the “trigger” property is true, otherwise it returns null. The “popup-inner” div contains a close button that calls the “setTrigger” function with a value of false when clicked, which closes the popup. The component also renders the children passed to it.
The “App” component is a functional component that uses the “useState” Hook to manage the state of the popup. It renders a button that calls the “setPopup” function with a value of true when clicked, which opens the popup. It also renders the “Popup” component and passes the “popup” state variable and the “setPopup” function as props.
Finally, the code uses ReactDOM.render() to render the “App” component into an HTML element with an id of “app”. This component is using the React.createElement() method to define the structure of the component.
Hopefully, you have been able to create this react modal popup on button click using the above codes. You can download all the code by clicking the button below.
If you want to open this React popup window automatically, let me know in the comments. If you like this simple modal popup in react js then be sure to share this tutorial.