Intro
The ability to reuse code is a great thing. I have encountered a situation where I have to build four different types of popups for an application.
Instead of writing four separate components, a single hybrid component would cater for the need.
The global popup I created makes use of some state checks to render individual UI elements. I used recoil for state management such that the various states of the component can be controlled globally. Wrapping up the control aspect into a hook will make it easy to use from various parts of the application.
In this post, I used Next.js for the demonstration.
Folder Structure
States
Each unit of state(atom) is stored in separate files and these are served from the index.js file of src/recoil/popup.
There are states included to
- open or close the popup,
- add a heading,
- enable or disable the close button,
- display content with a custom component,
- enable or disable images, and
- pass event handlers to buttons.
Also, it is given a provision to reset the state of the popup to its default value.
src/recoil/popup/index.js
import popupOpenOrClose from './popupOpenOrClose'
import popupHeading from './popupHeading'
import popupContentCloseMark from './popupContentCloseMark'
import popupCustomContent from './popupCustomContent'
import popupThumbsUp from './popupThumbsUp'
import popupThumbDown from './popupThumbDown'
import popupOkButton from './popupOkButton'
import popupCancelButton from './popupCancelButton'
import popupYesButton from './popupYesButton'
import useResetPopupState from './resetStates'
export {
popupOpenOrClose,
popupHeading,
popupContentCloseMark,
popupCustomContent,
popupThumbsUp,
popupThumbDown,
popupOkButton,
popupCancelButton,
popupYesButton,
useResetPopupState
}
src/recoil/popup/popupCancelButton.js
import { atom } from "recoil"
const popupCancelButton = atom({
key: "popupCancelButton",
default: false
})
export default popupCancelButton
The popupCancelButton atom store the function that must be executed on the onClick event of the cancel button.
src/recoil/popup/popupContentCloseMark.js
import { atom } from "recoil"
const popupContentCloseMark = atom({
key: "popupContentCloseMark",
default: false
})
export default popupContentCloseMark
The popupContentCloseMark atom store the state of whether the close button must be present or not in the popup.
src/recoil/popup/popupCustomContent.js
import { atom } from "recoil"
const popupCustomContent = atom({
key: "popupCustomContent",
default: <></>
})
export default popupCustomContent
The popupCustomContent atom store the custom content component that must be present or not in the popup.
src/recoil/popup/popupHeading.js
import { atom } from "recoil"
const popupHeading = atom({
key: "popupHeading",
default: ''
})
export default popupHeading
The popupHeading atom store the heading that must be present or not in the popup.
src/recoil/popup/popupOkButton.js
import { atom } from "recoil"
const popupOkButton = atom({
key: "popupOkButton",
default: false
})
export default popupOkButton
The popupOkButton atom store the function that must be executed on the onClick event of the Ok button.
src/recoil/popup/popupOpenOrClose.js
import { atom } from "recoil"
const popupOpenOrClose = atom({
key: "popupOpenOrClose",
default: false
})
export default popupOpenOrClose
The popupOpenOrClose atom store the state of whether the popup must be present or not.
src/recoil/popup/popupThumbDown.js
import { atom } from "recoil"
const popupThumbDown = atom({
key: "popupThumbDown",
default: false
})
export default popupThumbDown
The popupThumbDown atom store the state of whether the thumb down image must be present or not in the popup.
src/recoil/popup/popupThumbsUp.js
import { atom } from "recoil"
const popupThumbsUp = atom({
key: "popupThumbsUp",
default: false
})
export default popupThumbsUp
The popupThumbsUp atom store the state of whether the thumb up image must be present or not in the popup.
src/recoil/popup/popupYesButton.js
import { atom } from "recoil"
const popupYesButton = atom({
key: "popupYesButton",
default: false
})
export default popupYesButton
The popupYesButton atom store the function that must be executed on the onClick event of the Yes button.
src/recoil/popup/resetStates.js
import { useResetRecoilState } from "recoil";
import {
popupOpenOrClose,
popupHeading,
popupContentCloseMark,
popupCustomContent,
popupThumbsUp,
popupThumbDown,
popupOkButton,
popupCancelButton,
popupYesButton,
} from '../../recoil/popup'
const useResetPopupState = () => {
// reset state references
const resetOpenOrClosePopup = useResetRecoilState(popupOpenOrClose);
const resetPopupHeading = useResetRecoilState(popupHeading);
const resetContentCloseMarkPopup = useResetRecoilState(popupContentCloseMark);
const resetCustomContentPopup = useResetRecoilState(popupCustomContent);
const resetThumbsUpPopup = useResetRecoilState(popupThumbsUp);
const resetThumbDownPopup = useResetRecoilState(popupThumbDown);
const resetOkButtonPopup = useResetRecoilState(popupOkButton);
const resetCancelButtonPopup = useResetRecoilState(popupCancelButton);
const resetYesButtonPopup = useResetRecoilState(popupYesButton);
const resetState=()=>{
//reset to default
resetOpenOrClosePopup()
resetPopupHeading()
resetContentCloseMarkPopup()
resetCustomContentPopup()
resetThumbsUpPopup()
resetThumbDownPopup()
resetOkButtonPopup()
resetCancelButtonPopup()
resetYesButtonPopup()
}
return [resetState]
}
export default useResetPopupState
The useResetPopupState is a hook used to reset the states related to the popup. It returns resetState, by invoking resetState we can reset the popup states to their default values.
Custom Hook
src/hooks/usePopUp.js
import { useSetRecoilState } from "recoil";
import {
popupOpenOrClose,
popupHeading,
popupContentCloseMark,
popupCustomContent,
popupThumbsUp,
popupThumbDown,
popupOkButton,
popupCancelButton,
popupYesButton,
useResetPopupState
} from '../recoil/popup'
export const usePopUp = () => {
//states
const setOpenOrClosePopup = useSetRecoilState(popupOpenOrClose);
const setPopupHeading = useSetRecoilState(popupHeading);
const setContentCloseMarkPopup = useSetRecoilState(popupContentCloseMark);
const setcustomContentPopup = useSetRecoilState(popupCustomContent);
const setThumbsUpPopup = useSetRecoilState(popupThumbsUp);
const setThumbDownPopup = useSetRecoilState(popupThumbDown);
const setOkButtonPopup = useSetRecoilState(popupOkButton);
const setCancelButtonPopup = useSetRecoilState(popupCancelButton);
const setYesButtonPopup = useSetRecoilState(popupYesButton);
// hook
const [resetPopUp] = useResetPopupState()
// showPopup implmentation
const showPopup = (
{
heading,
showClose,
customContent,
ThumbUp,
ThumbDown,
onOkPressed,
onCancelpressed,
onYesPressed,
}) => {
resetPopUp()
setOpenOrClosePopup(true)
setPopupHeading(heading)
setContentCloseMarkPopup(showClose)
setcustomContentPopup(customContent)
setThumbsUpPopup(ThumbUp)
setThumbDownPopup(ThumbDown)
if (onOkPressed) {
setOkButtonPopup({ onClick: onOkPressed })
}
if (onCancelpressed) {
setCancelButtonPopup({ onClick: onCancelpressed })
}
if (onYesPressed) {
setYesButtonPopup({ onClick: onYesPressed })
}
}
// hidePopup implmentation
const hidePopup = () => {
resetPopUp()
}
return [showPopup, hidePopup]
}
The usePopUp() hook return [showPopup,hidePopup].
- The showPopup() function takes an object as an argument which is used to set the properties as well as various event handlers for the popup.
- The hidePopup() function hides the popup and sets its states to default value.
Popup Component
src/components/globalPopup/index.js
import React, { useEffect } from 'react'
import { useRecoilState, useRecoilValue } from "recoil";
import {
popupOpenOrClose,
popupHeading,
popupContentCloseMark,
popupCustomContent,
popupThumbsUp,
popupThumbDown,
popupOkButton,
popupCancelButton,
popupYesButton,
useResetPopupState
} from '../../recoil/popup'
import closeButton from '../../images/closeButton.png'
import thumbsUpImg from '../../images/thumbsUp.jpeg'
import innerClose from '../../images/innerClose.png'
import thumbsDownImg from '../../images/thumbsDown.jpeg'
import Image from 'next/image'
import styles from './globalPopup.module.css'
const GlobalPopup = () => {
// states
const [openOrClosePopup, setOpenOrClosePopup] = useRecoilState(popupOpenOrClose);
// values
const headingPopup = useRecoilValue(popupHeading);
const contentCloseMarkPopup = useRecoilValue(popupContentCloseMark);
const customContent = useRecoilValue(popupCustomContent);
const thumbsUpPopup = useRecoilValue(popupThumbsUp);
const thumbDownPopup = useRecoilValue(popupThumbDown);
const okButtonPopup = useRecoilValue(popupOkButton);
const cancelButtonPopup = useRecoilValue(popupCancelButton);
const yesButtonPopup = useRecoilValue(popupYesButton);
// hook
const[resetPopUp]=useResetPopupState()
// handling background scroll of body
useEffect(() => {
document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = 'visible'
//reset to default values
resetPopUp()
}
}, [])
//event handlers
const toggleOpenOrClosePopup = () => {
setOpenOrClosePopup((prev) => { return !prev })
}
return (
openOrClosePopup && (
<div className={styles.popupWrap}>
<div className={styles.closeButtonWrap}>
{contentCloseMarkPopup && (
<div
className={styles.closeButton}
onClick={toggleOpenOrClosePopup}
>
<Image src={closeButton} layout="fill" />
</div>
)}
</div>
<div className={styles.boxBig}>
<div className={styles.boxSmall}>
{contentCloseMarkPopup && (
< div className={styles.innerCloseWrap} onClick={toggleOpenOrClosePopup}>
<Image src={innerClose} width="20" height="20" />
</div>
)}
{thumbsUpPopup && (
<div className={styles.popUpMainImage}>
<Image src={thumbsUpImg} layout="fill" />
</div>
)}
{thumbDownPopup && (
<div className={styles.popUpMainImage}>
<Image src={thumbsDownImg} layout="fill" />
</div>
)}
<div className={styles.newHeading}>
<div className={styles.newHeadingInner}>
<h1> {headingPopup}
</h1>
</div>
</div>
<p className={styles.prompt}>
{customContent}
</p>
{(okButtonPopup || yesButtonPopup || cancelButtonPopup) && (
<div className={styles.actionButtions}>
{okButtonPopup && <div className={styles.actionButtionWrap} onClick={okButtonPopup.onClick}>
<button className={styles.buttonSmall} >Ok</button>
</div>
}
{yesButtonPopup && <div className={styles.actionButtionWrap} onClick={yesButtonPopup.onClick}>
<button className={styles.buttonSmall} >Yes</button>
</div>}
{cancelButtonPopup && <div className={styles.actionButtionWrap} onClick={cancelButtonPopup.onClick}>
<button className={styles.buttonSmall} >Cancel</button>
</div>}
</div>
)}
</div>
</div>
</div >)
)
}
export default GlobalPopup
The GlobalPopup makes use of the states that are available globally to render UI. The code inside the useEffect block prevents the scroll of the body when the popup is active and makes overflow visible when the popup is inactive.
Popup CSS
src/components/globalPopup/globalPopup.module.css
.popupWrap {
position: fixed;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.1);
background-size: cover;
top: 0;
left: 0;
z-index: 99;
}
.closeButtonWrap {
position: absolute;
top: 10%;
right: 10%;
display: flex;
justify-content: flex-end;
cursor: pointer;
}
.closeButton {
position: relative;
width: 30px;
height: 30px;
}
.boxBig {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.boxSmall {
background: #fff;
border-radius: 16px;
border-top: 6px solid #5ddfb6;
padding: 40px 65px;
display: flex;
flex-direction: column;
align-items: center;
}
.actionButtions {
padding: 15px 0px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.actionButtionWrap {
margin: 0px 5px;
}
.actionButtionWrap button {
cursor: pointer;
}
.popUpMainImage {
position: relative;
width: 100px;
aspect-ratio: 1/1;
}
.specificEmail {
color: #9e8959;
}
.newHeading {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.newHeadingInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 10px;
}
.newHeading h1 {
margin-bottom: 10px;
font-size: 30px;
font-weight: 500;
color: #000000;
text-align: center;
}
.prompt {
font-size: 16px;
line-height: 150%;
margin-top: 10px;
text-align: center;
font-weight: 400;
color: rgba(0, 0, 0, 0.68);
}
.prompt span {
color: #1cd7b8;
}
.innerCloseWrap {
display: none;
}
.buttonSmall {
width: 74px;
height: 27px;
font-family: "Poppins";
font-size: 0.8rem;
line-height: 24px;
background: #58c0ce;
border-radius: 3px;
border-color: #525251;
box-shadow: 0 0 0 0;
color: white;
border: none;
padding: 0;
padding: 2px 8px 2px 8px;
transition: 0.4s;
}
.buttonSmall:hover {
background: #5ddfb6;
}
@media screen and (max-width: 560px) {
.prompt {
font-size: 14px;
margin-top: 10px;
}
.closeButtonWrap {
display: none;
}
.boxBig {
width: 80%;
}
.boxSmall {
width: 100%;
}
.innerCloseWrap {
display: block;
position: absolute;
width: 30px;
right: 0px;
top: 15px;
}
.popUpMainImage {
position: relative;
width: 70px;
aspect-ratio: 1/1;
}
.newHeading h1 {
margin-bottom: 5px;
font-size: 25px;
font-weight: 500;
color: #000000;
}
.prompt {
margin-top: 10px;
}
}
@media screen and (max-width: 425px) {
.boxSmall {
padding: 40px 50px;
}
}
This is the CSS used for the popup. The popup is mobile responsive also.
Include Component
src/pages/_app.js
import { RecoilRoot } from 'recoil'
import GlobalPopup from '../components/globalPopup'
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<RecoilRoot>
<>
<Component {...pageProps} />
<GlobalPopup/>
</>
</RecoilRoot>)
}
export default MyApp
To make the popup available as a global entity in the application. It is included as a component in _app.js. The component is wrapped with the context provided by RecoilRoot to ensure the availability of atom states.
Test the Popup
src/pages/testPopUps/index.js
import React from 'react'
import { usePopUp } from '../../hooks/usePopUp';
const TestPopup = () => {
const [showPopup, hidePopup] = usePopUp()
// showPopup - use it for diplaying popups with specified options
// hidePopup - use it for hiding the popup (as well as to reset to default state)
return (
<div>
<button onClick={() => {
showPopup({
ThumbUp: true,
heading: 'Success !',
showClose: true,
customContent: <>The process is <span>Successful</span></>
})
}}>
Activate Popup 1
</button>
<button onClick={() => {
showPopup({
showClose: true,
ThumbDown: true,
heading: 'Error !',
customContent: <>An Error Occured.</>
})
}}>
Activate Popup 2
</button>
<button onClick={() => {
showPopup({
customContent: <>An account with email <span>John@gmail.com</span> already exist</>,
onCancelpressed: () => {
console.log("onCancelpressed");
hidePopup()
},
onYesPressed: () => {
console.log("onYesPressed");
hidePopup()
}
})
}}>
Activate Popup 3
</button>
<button onClick={() => {
showPopup({
customContent: <>An account with email <span>John@gmail.com</span> already exist</>,
onOkPressed: () => {
console.log("onOkPressed");
hidePopup()
}
})
}}>
Activate Popup 4
</button>
</div >
)
}
export default TestPopup
For testing the popup we created a page, in that page, there are four buttons and each of these buttons presents the popup in a different specification.
Using the showPopup() we can configure the popup with various options.
Output
In this way, the same component is made to be reused, rendered conditionally and controlled from anywhere in the application.
Thank you.
Top comments (0)