How to Create a custom PopUp Component in React

In this blog we will learn how to create a custom PopUp Component in React. Our Focus will be on creating a Reusable Component that we can Invoke from any of the component entire our project.

So Let’s follow the steps to create this component.

Step 1: Create a file named custom-popup.module.css with following code

In this file we have created all the relevant css that will be needed in our component

Step 2: Now create Popup Component with name CustomPopup.jsx with following code

This will be our component code where we are maintaining the popup opening and closing states on various events. Also we are using propTypes Module to validate our Props. make sure you have installed prop-types module using following npm command

Step 3: Invocation from another component

It will need 3 props :
1: onClose – need a handler to do some activity after close click in popup itself
2: show – pass the visibility of popup suing boolean true or false
3: title – provide the popup title


and Inside the you may pass any valid JSX that you want to render as content of popup

If you need a complete example how can we do utilise this PopUp Component then you may look into following code

Hurray we are all set, It will look like following screenshot

react custom popup component


Thats it for this blog. you may reach out to me in case you have any doubts and suggestions please let me know in comments section.

Thanks

Published by

Jeetendra Singh

Jeetendra Singh is a Full Stack Architect who has 12+ Years of Experience into Software Development. He is a Microsoft certified technology Specialist and AWS Certified Associate Architect. His Major Interests are in Mongo Db, Express Js, React Js, Node Js (MERN STACK), Python, DJango, Redis, Mysql, Dynamo DB , Devops, Jenkins, Cloud/Lamda , Fast Api. He build variety of applications using Python, Mern, Mean, Node, JavaScript, jQuery & PHP