{"id":103,"date":"2022-02-07T09:47:12","date_gmt":"2022-02-07T09:47:12","guid":{"rendered":"https:\/\/www.copycat.dev\/blog\/?p=103"},"modified":"2023-03-07T14:34:58","modified_gmt":"2023-03-07T14:34:58","slug":"reactjs-popup","status":"publish","type":"post","link":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/","title":{"rendered":"Reactjs PopUp: How to Easily Create Popups in React?"},"content":{"rendered":"<div class=\"convertful-189277\"><\/div>\n\n\n\n<p>Great user experience and user interfaces plays a vital role in the success of any Application. Whether it is a Hybrid Application or a Native one, the end-user demands good UX. When creating any such good experience on an App, there are use cases where you have to collect quick information from the user without re-routing the Page. In such a case, Reactjs PopUp is one of the best choices you could have. <em>They are fixed containers containing information based on any action from the user on the Page and can add a good user experience.\u00a0<\/em><\/p>\n\n\n\n<p>There are numerous ways to implement a Reactjs PopUp, all depending on the framework used. Several issues also arise with the Pop Up not getting closed, not being triggered on time or positions on the Viewport. Scrolling, editing and backdrop are also significant issues you face. This blog will guide you through different ways to develop a Reactjs PopUp while avoiding these common problems.<\/p>\n\n\n\n<div id=\"rtoc-mokuji-wrapper\" class=\"rtoc-mokuji-content frame3 preset2 animation-fade rtoc_open noto-sans\" data-id=\"103\" data-theme=\"CopyCat Theme\">\n\t\t\t<div id=\"rtoc-mokuji-title\" class=\" rtoc_left\">\n\t\t\t<button class=\"rtoc_open_close rtoc_open\"><\/button>\n\t\t\t<span>Table of Contents<\/span>\n\t\t\t<\/div><ol class=\"rtoc-mokuji decimal_ol level-1\"><li class=\"rtoc-item\"><a href=\"#creating-a-custom-reactjs-popup\">Creating a Custom Reactjs PopUp<\/a><\/li><li class=\"rtoc-item\"><a href=\"#common-issues-while-building-reactjs-popup-in-production\">Common Issues While Building Reactjs PopUp in production<\/a><\/li><li class=\"rtoc-item\"><a href=\"#fixing-the-backdrop-problem\">Fixing the backdrop Problem<\/a><ul class=\"rtoc-mokuji mokuji_ul level-2\"><li class=\"rtoc-item\"><a href=\"#rtoc-4\">So, how can we restrict the user from not interacting with what is behind the PopUp? <\/a><\/li><\/ul><\/li><li class=\"rtoc-item\"><a href=\"#fixing-the-event-problem\">Fixing the Event Problem:<\/a><\/li><li class=\"rtoc-item\"><a href=\"#reactjs-popup-using-bootstrap\">Reactjs PopUp Using Bootstrap<\/a><\/li><li class=\"rtoc-item\"><a href=\"#summing-up-reactjs-popup\">Summing Up Reactjs PopUp<\/a><\/li><\/ol><\/div><h2 class=\"wp-block-heading\" id=\"creating-a-custom-reactjs-popup\">Creating a Custom Reactjs PopUp<\/h2>\n\n\n\n<p>Let us assume a use case where you have to render a Reactjs PopUp once the user clicks on a button. Technically, Pop Up is simply a container where you are collecting or showing information to the user. So, all you need is a container.\u00a0<\/p>\n\n\n\n<p>Before proceeding, let us create our React App Project using <em>npx create-react-app<\/em>.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"353\" src=\"https:\/\/lh3.googleusercontent.com\/wd6HEfxxirenjjvkLWyydn1QjQCF70QfZfvJA1Ue8SSRCAvYMXMG9KYDCwlvFc9c0ACPqzt47JtB-OdTN8298sgWdA-GDXNA684IVLhXVnlpWg95r3UcbNpxwJ5njvSr1vpXir3g\"><\/p>\n\n\n\n<p>The Components are divided into generic <a href=\"https:\/\/www.copycat.dev\/blog\/react-functional-components\/\">Functional Components<\/a> <em>PopUpsGalley<\/em> and <em>CustomPopUp<\/em>. All the Reactjs Popups you will go through this blog will be the child of the <em>PopUpsGallery<\/em> Component.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"839\" src=\"https:\/\/lh4.googleusercontent.com\/HewYWB5CRwpU0MmwHS0kvO-_vfcq5HHI6x8CqPC_7qkCyqp9pzSyPLqSIOZ58pDb5G0gEJdAgdBNRnt_xwDWq-bj_7lNx_p6wc3jk5GMEz2z8OVBHeEYJ8GZJIx_vSLTWepg3D26\"><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport styled from 'styled-components';\nimport CustomPopUp from '.\/CustomPopUp';\n \nconst PopUpsGallery = ({props}) =&gt; {\n   return (\n       &lt;StyledPopUpsGallery&gt;\n           &lt;CustomPopUp&gt;&lt;\/CustomPopUp&gt;\n       &lt;\/StyledPopUpsGallery&gt;\n    );\n}\nexport default PopUpsGallery;\n<\/pre><\/div>\n\n\n<p>Now, let&#8217;s define create our simple react Popup Component Structure in App.js.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport styled from 'styled-components';\nimport PopUpsGallery from '.\/Components\/PopUpsGallery';\nimport { createGlobalStyle } from 'styled-components'\n \nfunction App() {\n    \n return (\n    &lt;StyledParent&gt;\n       &lt;GlobalStyle&gt;&lt;\/GlobalStyle&gt;\n       &lt;PopUpsGallery&gt;&lt;\/PopUpsGallery&gt;\n    &lt;\/StyledParent&gt;\n );\n}\n \nexport default App;\n<\/pre><\/div>\n\n\n<p>As we discussed before, PopUps are simply containers. These containers can be a div element or even a span. You need to have a Parent Container <em>StyledCustomPopUp<\/em>, on which you need a fixed positioned child element which will be your Pop Up. You can place the Pop Up onto the Parent based on your requirements.<\/p>\n\n\n\n<p>So, we have below DOM structure :&nbsp;<\/p>\n\n\n\n<p>Parent &#8211; 100% height and 100% width of its main Parent and,<\/p>\n\n\n\n<p>Modal &#8211; x% height and y% width fixed to the Viewport or relative to the Parent.<\/p>\n\n\n\n<p>Then, we need to have a button in the UI components that will trigger the handler method <em>handleBtnClick<\/em> to open the PopUp. Next, you need a state variable <em>btnState<\/em> that will bind the toggle logic for the PopUp.\u00a0<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport { useEffect, useState } from &quot;react&quot;;\nimport styled from &quot;styled-components&quot;;\n \nconst CustomPopUp = () =&gt; {\n \/\/state variables for the Modal State\n const &#091;btnState, setBtnState] = useState(false);\n \n \/\/toggle the Modal Display State\n const handleBtnClick = (e) =&gt; {\n   setBtnState((prev) =&gt; !prev);\n };\n \n return (\n   &lt;StyledCustomPopUp id=&quot;grand-parent&quot;&gt;\n     &lt;StyledLabel&gt;Click the button to open the Custom PopUp&lt;\/StyledLabel&gt;\n     &lt;StyledButton&gt;\n       &lt;button className=&quot;btn&quot; onClick={(e) =&gt; handleBtnClick(e)}&gt;\n         Click\n       &lt;\/button&gt;\n     &lt;\/StyledButton&gt;\n     &lt;StyledPopUpBackdrop id=&quot;backdrop-parent&quot; className={btnState ? &quot;show-modal&quot; : &quot;&quot;}&gt;\n       &lt;StyledPopUp id=&quot;popup&quot;&gt;\n         &lt;StyledCloseIcon onClick={(e) =&gt; handleBtnClick(e)}&gt;&lt;\/StyledCloseIcon&gt;\n         I am a Modal !!\n       &lt;\/StyledPopUp&gt;\n     &lt;\/StyledPopUpBackdrop&gt;\n   &lt;\/StyledCustomPopUp&gt;\n );\n};\n \nexport default CustomPopUp;\n<\/pre><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/02\/pasted-image-0-1024x567.gif\" alt=\"\" class=\"wp-image-105\" srcset=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/02\/pasted-image-0-1024x567.gif 1024w, https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/02\/pasted-image-0-300x166.gif 300w, https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2022\/02\/pasted-image-0-768x425.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Resulting output for our PopUp&nbsp;<\/em><br><\/figcaption><\/figure>\n\n\n\n<p>As you can see in the above output, with the Button&#8217;s click, the Pop Up is rendered, and a close icon is positioned right to the Modal to toggle the visibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"common-issues-while-building-reactjs-popup-in-production\">Common Issues While Building Reactjs PopUp in production<\/h2>\n\n\n\n<p>Creating this prototype is easy, but the challenge comes when you tackle real-world problems such as:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The user can click outside the Reactjs PopUp when it is open. This action can create numerous issues if you have activities behind your pop up that you don&#8217;t want the user to interact with. This issue is commonly known as the <strong><em>BackDrop<\/em><\/strong> <strong><em>problem<\/em><\/strong>.<\/li>\n\n\n\n<li>Another critical issue you can face in a real-world scenario is the event bubbling to its parents. Ideally, this should never occur as this can create a bad user experience. It can also produce unexpected output to the user. One good example of this issue is Scrolling. Let&#8217;s say your Reactjs PopUp has a child who has an overflowing height, and you want the user to scroll within the PopUp. Once the user reaches the end of the scroll, the event will bubble up to its Parent, and in case if Parent has an overflowing height, that will start to scroll.<\/li>\n<\/ol>\n\n\n\n<p>These issues can have a significant impact on the user experience. Let us go through the ways by which you can avoid these problems.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fixing-the-backdrop-problem\">Fixing the backdrop Problem<\/h2>\n\n\n\n<p>An essential aspect of creating a Reactjs PopUp is not to let users click anything behind the PopUp. This depends on the dimension of the Reactjs PopUp container and might not be a problem for developers who are occupying a significant portion of the Viewport. But, on the other side, most of the PopUps are small in size and are meant to render information within their boundary. <\/p>\n\n\n\n<h3 id=\"rtoc-4\"  class=\"wp-block-heading\">So, how can we restrict the user from not interacting with what is behind the PopUp? <\/h3>\n\n\n\n<p>Well, there are numerous ways you can do this. You can either disable the rest of the DOM Elements while the Reactjs PopUp is open, but this is not an efficient way as the browser will get occupied traversing the entire DOM tree whenever the PopUp toggles. The best and most widely used method is introducing a full 100vh * 100vw Parent to the PopUp whose background is as light as possible. Developing this way can also add good UX because you are adding a dim light on the Reactjs PopUp backdrop when it opens, letting the users know that you can&#8217;t do anything outside.\u00a0<\/p>\n\n\n\n<p>Now the question comes, how can you do this. Let me guide you through that.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst StyledPopUpBackdrop = styled.div`\n position: fixed;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f7f1f185;\n left: 0;\n top: 0;\n display : none;\n &amp;.show-modal {\n   display: flex;\n }\n`;\n \nconst StyledPopUp = styled.div`\n display : flex;\n align-items: center;\n justify-content: center;\n height: 10rem;\n width: 30rem;\n background: rgba(255, 255, 255, 0.25);\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n backdrop-filter: blur(7px);\n -webkit-backdrop-filter: blur(7px);\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.18);\n`;\n<\/pre><\/div>\n\n\n<p>Here, <em>StyledCustomBackdrop<\/em> is the Parent of the Reactjs PopUp <em>StyledPopUp<\/em>Positioned fixed to the main Parent ( could be your body or a grand-parent ). <em>StyledCustomBackdrop <\/em>is taking the entire Viewport, and the main display PopUp that we see in the gif above is where the information is showing. This way, you are restricting the user not to do anything outside the Reactjs PopUp as StyledCustomBackdrop stacks the outside elements<em>.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fixing-the-event-problem\">Fixing the Event Problem:<\/h2>\n\n\n\n<p>As you read above, the problem occurs when the event bubbles to the next Parent till the way to the top. This bubbling can&#8217;t be termed a problem but is a normal behaviour of how events delegate within the DOM tree, which sometimes creates problems when developing any PopUp. So, the idea is to restrict the events bubbling from the Reactjs PopUp and will only reside inside it.\u00a0<\/p>\n\n\n\n<p>Let us attach three-click event listeners to the Reactjs PopUp and its corresponding parents.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nuseEffect(() =&gt; {\n   if (document.getElementById(&quot;popup&quot;)) {\n     document.getElementById(&quot;popup&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n         console.log(&quot;popup&quot;);\n       },\n       false\n     );\n   }\n \n   if (document.getElementById(&quot;backdrop-parent&quot;)) {\n     document.getElementById(&quot;backdrop-parent&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n         console.log(&quot;backdrop-parent&quot;);\n       },\n       false\n     );\n   }\n \n   if (document.getElementById(&quot;grand-parent&quot;)) {\n     document.getElementById(&quot;grand-parent&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n         console.log(&quot;grand-parent&quot;);\n       },\n       false\n     );\n   }\n }, &#091;]);\n<\/pre><\/div>\n\n\n<p><em>Note: All the listeners attached are within the <\/em><strong><em>useEffect<\/em><\/strong><em> because you dont want to connect multiple listeners to the same element whenever a render cycle occurs.<\/em><\/p>\n\n\n\n<p>Just for a brief, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Building_blocks\/Events\"><em>Event delegation<\/em><\/a> is a process by which events bubbles to the top. For every listener attached, you can specify this phenomenon. By adding false as the third parameter, you let the events bubble up from the container, and with True, you are <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Building_blocks\/Events\"><em>Trickling<\/em><\/a> them. Event delegation follows <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Building_blocks\/Events\"><em>the Bubbling<\/em><\/a> process. I would highly recommend you read about them because they are fundamental concepts to know about in JavaScript.<\/p>\n\n\n\n<p>Now that you know about the delegation process, you are more likely to understand that when you click on the Reactjs PopUp ( the innermost child element ), the event will bubble to the BackDrop Parent and the Main Parent. To restrict this, all you need to do is to stop this propagation of events from the Reactjs PopUp to the next Parent. So, you need to add event.stopPropagation() to the PopUp&#8217;s attached click listener.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nuseEffect(() =&gt; {\n   if (document.getElementById(&quot;popup&quot;)) {\n     document.getElementById(&quot;popup&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n\t  e.stopPropagation();\n         console.log(&quot;1&quot;);\n       },\n       false\n     );\n   }\n \n   if (document.getElementById(&quot;backdrop-parent&quot;)) {\n     document.getElementById(&quot;backdrop-parent&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n         console.log(&quot;2&quot;);\n       },\n       false\n     );\n   }\n \n   if (document.getElementById(&quot;grand-parent&quot;)) {\n     document.getElementById(&quot;grand-parent&quot;).addEventListener(\n       &quot;click&quot;,\n       (e) =&gt; {\n         console.log(&quot;3&quot;);\n       },\n       false\n     );\n   }\n }, &#091;]);\n<\/pre><\/div>\n\n\n<p>Tackling these two problems are very important while developing PopUps in React. These fundamental ideas decrease the chances of bugs and create a good user experience. But in case of strict timelines within your Project, you would not get so to think about these issues unless you are experienced. Let us see a PopUp Library developed by the React Community itself, which takes care of all these issues and adds more value to your simple react Popup Component.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reactjs-popup-using-bootstrap\">Reactjs PopUp Using Bootstrap<\/h2>\n\n\n\n<p><a href=\"https:\/\/react-bootstrap.github.io\/components\/modal\/\"><em>React Bootstrap PopUps<\/em><\/a><i> <\/i>are a widely used library-based PopUp Component and is simple to use. This library comes up with different options that make it even more robust. A few of them are :&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Full-Screen Mode<\/li>\n\n\n\n<li>Focus Control<\/li>\n\n\n\n<li>Position Control<\/li>\n\n\n\n<li>Access to various events on multiple actions like exit and open of PopUp.<\/li>\n\n\n\n<li>Scrollable or Non-Scrollable<\/li>\n\n\n\n<li>Size, etc..<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"summing-up-reactjs-popup\">Summing Up Reactjs PopUp<\/h2>\n\n\n\n<p>In Summary, it all depends on the use cases. Sometimes for simple PopUps, developing a custom is a good idea. It gives you control over the react Component, and you can play around with it. But if your use case is vast, having large and dynamic data, React BootStrap Popups are the best you can integrate into your Project. Many other open source libraries are available, but it is best to use the popular ones widely used among the developers. I hope this blog must have helped you get clear insights about PopUps and has given you a helpful guide.<\/p>\n\n\n\n<p>Moreover, if you want to read more React js content visit the <a href=\"https:\/\/www.copycat.dev\/blog\/\">CopyCat blog<\/a> or check out our <a href=\"https:\/\/copycat.dev\/figma-code\">tool <\/a>that turns <a href=\"https:\/\/www.copycat.dev\/blog\/figma-to-react\/\">Figma to React<\/a> with the click of a button. Building user interfaces will be quicker and less painful by using our smart reusable components.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/copycat.dev\/figma-code\" style=\"background-color:#7b3beb\">CONVERT FIGMA TO REACT<\/a><\/div>\n<\/div>\n\n\n\n<p><strong>Interesting Reads From Our Blogs<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/react-lazy\/\">Complete Guide to React Lazy Loading and Code Splitting<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/react-useref\">React UseRef: Create Scalable Apps That Perform Like a Dream<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/reactjs-bootstrap\/\">Create Responsive, UI Components-Based UI Elements Like a Pro with Reactjs Bootstrap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/react-js-navigation\">Create Smooth and Easy React Navigation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.copycat.dev\/blog\/react-router-redirect\/\">React Router Redirect: How to Use in Your App<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Great user experience and user interfaces plays a vital role in the success of any Application. Whether it is a Hybrid Application or a Native one, the end-user demands good UX. When creating any such good experience on an App, there are use cases where you have to collect quick information from the user without [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[17],"tags":[40,27,47,86,30],"class_list":["post-103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-how-to","tag-react","tag-react-guide","tag-react-popup","tag-react-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.13 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Reactjs PopUp: Easily Create Popups in React - CopyCat Blog<\/title>\n<meta name=\"description\" content=\"This blog will guide you through different ways to develop a Reactjs PopUp to capture user information while avoiding common problems.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reactjs PopUp: Easily Create Popups in React - CopyCat Blog\" \/>\n<meta property=\"og:description\" content=\"This blog will guide you through different ways to develop a Reactjs PopUp to capture user information while avoiding common problems.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/\" \/>\n<meta property=\"og:site_name\" content=\"CopyCat Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-07T09:47:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-07T14:34:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2021\/12\/3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"copycat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"copycat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reactjs PopUp: Easily Create Popups in React - CopyCat Blog","description":"This blog will guide you through different ways to develop a Reactjs PopUp to capture user information while avoiding common problems.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/","og_locale":"en_US","og_type":"article","og_title":"Reactjs PopUp: Easily Create Popups in React - CopyCat Blog","og_description":"This blog will guide you through different ways to develop a Reactjs PopUp to capture user information while avoiding common problems.","og_url":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/","og_site_name":"CopyCat Blog","article_published_time":"2022-02-07T09:47:12+00:00","article_modified_time":"2023-03-07T14:34:58+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2021\/12\/3.png","type":"image\/png"}],"author":"copycat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"copycat","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/","url":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/","name":"Reactjs PopUp: Easily Create Popups in React - CopyCat Blog","isPartOf":{"@id":"https:\/\/www.copycat.dev\/blog\/#website"},"datePublished":"2022-02-07T09:47:12+00:00","dateModified":"2023-03-07T14:34:58+00:00","author":{"@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/58e97804b9ec2378091fd4175bdeda77"},"description":"This blog will guide you through different ways to develop a Reactjs PopUp to capture user information while avoiding common problems.","breadcrumb":{"@id":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copycat.dev\/blog\/reactjs-popup\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.copycat.dev\/blog\/reactjs-popup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copycat.dev\/blog\/"},{"@type":"ListItem","position":2,"name":"Reactjs PopUp: How to Easily Create Popups in React?"}]},{"@type":"WebSite","@id":"https:\/\/www.copycat.dev\/blog\/#website","url":"https:\/\/www.copycat.dev\/blog\/","name":"CopyCat Blog","description":"Perfect the art of copying code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copycat.dev\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/58e97804b9ec2378091fd4175bdeda77","name":"copycat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copycat.dev\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79ef71855dd2bd25688967474873eeb3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79ef71855dd2bd25688967474873eeb3?s=96&d=mm&r=g","caption":"copycat"},"sameAs":["http:\/\/52.255.184.77"],"url":"https:\/\/www.copycat.dev\/blog\/author\/copycat\/"}]}},"jetpack_featured_media_url":"https:\/\/www.copycat.dev\/blog\/wp-content\/uploads\/2021\/12\/3.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":26,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":3683,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions\/3683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media\/326"}],"wp:attachment":[{"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copycat.dev\/blog\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}