DEV Community

Radheshyam Gupta
Radheshyam Gupta

Posted on

Create Your own Popup Message Box Or toastify In React and avoid Security Bridge.

#webdev #programming #beginners #react

Go For Live Demo

In React Or Any JavaScript Web Application,We need to show message to user for information and for that we use third part packages for this.We don't know what we install with that packages and also we increase this size of our web application.And,it is big challenging job to Secure your web application from unauthorised persons.
For all above ,to avoid worry we should avoid using third party packages.
Today I just show to you with small program to fulfilled this challenging job in very easy way.

Now times to show Code;

First we need to Create a new folder "component" inside "src" folder. In component folder we create three new folder name like "Icons,popup,toastify".

In "Icons" folder we create Icons.js file which store Icons related small component which mix with svg file.
In "Icons" folder we create Icons.js file which store Icons related small component which mix with svg file.

Icons.js Code are Below

import React from 'react';


export const ShoppingCart = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" >
            <path d="M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z" />
        </svg >

        );
};

export const CheckCircle = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`}  xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};
export const Warning = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z" />
        </svg>

        );
};
export const Error = (props) => {
    const {ClassNm,IconColor,IconSize} = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

        );
};

export const SpinnerIcon = (props) => {
    const { ClassNm, IconColor, IconSize } = props;
    return (
        <svg className={ClassNm} fill={IconColor} transform={`scale(${IconSize})`} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
            <path d="m482-200 114-113-114-113-42 42 43 43q-28 1-54.5-9T381-381q-20-20-30.5-46T340-479q0-17 4.5-34t12.5-33l-44-44q-17 25-25 53t-8 57q0 38 15 75t44 66q29 29 65 43.5t74 15.5l-38 38 42 42Zm165-170q17-25 25-53t8-57q0-38-14.5-75.5T622-622q-29-29-65.5-43T482-679l38-39-42-42-114 113 114 113 42-42-44-44q27 0 55 10.5t48 30.5q20 20 30.5 46t10.5 52q0 17-4.5 34T603-414l44 44ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
        </svg>

    );
};
Enter fullscreen mode Exit fullscreen mode

In "popup" folder we have PopupBox.css and PopupBox.jsx file.

PopupBox.css and PopupBox.jsx Code are Below

/*PopupBox.css*/

.PopupBoxModal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}
.PopupBody {
    width: 26%;
    min-width: 233px;
    height: 32%;
    min-height: 300px;
    border: 1px solid #888;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 11px;
    background-color: #fefefe;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.PopupHeader {
    width: 100%;
    height: 50px;
    display: flex;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
}
.PopupHeaderText {
    width: 32%;
    min-width: 129px;
    height: 50px;   
    border-top-left-radius: 11px;
}
.PopupHeaderTxt {
    font-size: medium;
    font-family: cursive;
    font-weight: 300;
    padding: 1px 13px
}
.PopupHeaderIcon {
    width: 10%;
    height: 50px;

}
.PopupHeaderBtn {
    width: 58%;
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    border-top-right-radius: 11px;
}

.PopupBtn {
    background: none;
    border: none;
    /* margin-left: 88px; */
    margin-top: -16px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}
.PopupBtn:hover {
    cursor:pointer;
    color:white;
}
.PopupMessageBody {
    height: 62%;
    min-height: 186px;
    overflow-y:auto;
}
.PopupFooter {
    display: flex;
    flex-direction: column;
}
/* OK Button */
.okBtn {
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    align-self: center;
    margin-top: 10px;
}

.okBtn:hover {
  background-color: #45a049;
}

.IconSpin {
    position: absolute;
    margin-top: 9px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}
@media (prefers-reduced-motion: no-preference) {
    .IconSpin {
        animation: HeaderIconSpin infinite 2s linear;
    }
}
@keyframes HeaderIconSpin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/*PopupBox.jsx*/

import { CheckCircle, Warning, Error, SpinnerIcon } from '../Icons/Icons';
import './PopupBox.css';


const PopupBox = (props) => {

    const { Message, RedirectUrl, IsSuccess, IsWarning, IsError ,ClosePopup} = props;

    const MessageList = Message.split(",");

    const HeaderText = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "";
    const HeaderBcColor = IsSuccess ? "GreenClr" : IsWarning ? "YellowClr" : IsError ? "RedClr" : "YellowClr";
    const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
        : IsWarning ? <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />
            : IsError ? <Error ClassNm="IconPopup" IconColor="#fefefe" IconSize={1.4} />
                : <Warning ClassNm="IconPopup" IconColor="#fefefe" IconSize={1} />;

    return (
        <>
            <div className="PopupBoxModal">
                <div className="PopupBody">
                    <div className={"PopupHeader " + HeaderBcColor}>
                        <div className="PopupHeaderText">
                            <span className="PopupHeaderTxt">{HeaderText}</span> {PopupHeaderIcon}
                        </div>
                        <div className="PopupHeaderIcon">
                            <div className="IconSpin">
                                <SpinnerIcon ClassNm="SpinnerIcon" IconColor="#fefefe" IconSize={1.4} />
                            </div>
                        </div>
                        <div className="PopupHeaderBtn">
                            <button className="PopupBtn" onClick={() => { ClosePopup(RedirectUrl) }}> <span>&times;</span> </button>
                        </div>
                    </div>
                    <div className="PopupMessageBody" >
                        <ul>
                            {
                                MessageList.map((msg, index) => (

                                    <li key={"PopupMSg " + index}>{msg}</li>
                                ))

                            }


                        </ul>
                    </div>
                    <div className="PopupFooter">
                        <button className={"okBtn " + HeaderBcColor} onClick={() => { ClosePopup(RedirectUrl) }}>OK</button>
                    </div>

                </div>
            </div>
        </>
    );
};
export default PopupBox;
Enter fullscreen mode Exit fullscreen mode

In "toastify" folder we have Toastify.css and Toastify.jsx file.

Toastify.css and Toastify.jsx Code are Below

/*Toastify.css */
.ToastifyModal {
    position: relative;
    z-index: 1;
    margin-left: 23px;
    margin-top: 18px;
    margin-right: 33px;
    float: right;
    width: 16%;
    min-width: 318px;
    height: 75px;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 11px;
    animation: FlipToast 1s;
    animation-timing-function: linear;
}

@keyframes FlipToast{
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
.ToastifyBody {
    position: absolute;
    width: inherit;
    min-width: inherit;
    height: inherit;
    min-height: inherit;
    border: 1px solid #888;
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.ToastifyHeader {
    width: 100%;
    height: 18px;
    display: flex;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;

}

.ToastifyHeaderText {
    width: 33%;
    min-width: 104px;
    height: 17px;
    border-top-left-radius: 11px;
    padding: 0px;
    margin-left: 13px;
}



.ToastifyHeaderTxt {
    font-size: 10px;
    font-family: cursive;
    font-weight: 100;
    padding: 1px 17px;
    display: block;
    float: left;
}

.ToastifyHeaderIcon {
    width: 10%;
    height: inherit;

}

.ToastifyHeaderBtn {
    width: 67%;
    height: inherit;
    display: flex;
    flex-direction: row-reverse;
    border-top-right-radius: 11px;

}

.ToastifyBtn {
    background: none;
    border: none;
    /* margin-left: 88px; */
    margin-top: -7px;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
}

    .ToastifyBtn:hover {
        cursor: pointer;
        color: white;
    }

.ToastifyMessageBody {
    height: 49%;
    min-height: 26px;
    overflow-y: hidden;
    font-size: 13px;
}

.ToastifyFooter {
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}
/* OK Button */
.ToastifyProgressBar {
    color: white;
    background-color: #eaf0f9;
    border: none;
    text-align: center;
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 0px;
    height: 13px;
    border: 1px solid;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}
.ToastifyProgressBarChild {
    text-align: center;
    font-size: 10px;
    height: 13px;
    border: 1px solid;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
} 

.ToastifyIconPopup {
    cursor: pointer;
    margin-left: 1px;
    margin-top: -2px;
}
.ToastifySpinnerIcon {
    cursor: pointer;
    margin-top: 3px;
    margin-left: 3px;
    border: 1px solid Blue;
}
.ToastifyIconSpin {
    position: absolute;
    margin-top: 1px;
    border-radius: 50%;
    height: 9px;
    width: 9px;
}

@media (prefers-reduced-motion: no-preference) {
    .ToastifyIconSpin {
        animation: ToastifyHeaderIconSpin infinite 2s linear;
    }
}

@keyframes ToastifyHeaderIconSpin {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}



/*Toastify.jsx  */

import './Toastify.css';
import { CheckCircle, Warning, Error, SpinnerIcon } from '../Icons/Icons';
import { useEffect, useState } from 'react';

const Toastify = (props) => {
    const [progressBarIndicator, setProgressBarIndicator] = useState(100);
    const { Message, RedirectUrl, IsSuccess, IsWarning, IsError, ClosePopup,TimmerSpeedInMiliseconds,AutoClose } = props;

    const MessageList = Message.split(",");

    const HeaderText = IsSuccess ? "Success" : IsWarning ? "Warning" : IsError ? "Error" : "";
    const HeaderBcColor = IsSuccess ? "GreenClr" : IsWarning ? "YellowClr" : IsError ? "RedClr" : "YellowClr";
    const PopupHeaderIcon = IsSuccess ? <CheckCircle ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.5} />
        : IsWarning ? <Warning ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.6} />
            : IsError ? <Error ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.5} />
                : <Warning ClassNm="ToastifyIconPopup" IconColor="#fefefe" IconSize={0.6} />;
    let timerStart = null;
    useEffect(() => {
        if (AutoClose) {
            timerStart = setInterval(() => {
                setProgressBarIndicator((pre) => (pre - 1));
            }, TimmerSpeedInMiliseconds);

            return () => { clearInterval(timerStart) };
        }

    }, [progressBarIndicator]);

    useEffect(() => {
        if (progressBarIndicator === 10) {
            clearInterval(timerStart);
            ClosePopup(RedirectUrl);
        }
    }, [progressBarIndicator]);
    return (
        <>
            <div className="ToastifyModal">
                <div className={"ToastifyBody " + HeaderBcColor}>
                    <div className={"ToastifyHeader " + HeaderBcColor}>

                        <div className="ToastifyHeaderText">
                            <span className="ToastifyHeaderTxt">{HeaderText}</span> {PopupHeaderIcon}
                        </div>

                        <div className="ToastifyHeaderBtn">
                            <button className="ToastifyBtn" onClick={() => { ClosePopup(RedirectUrl) }}> <span>&times;</span> </button>
                        </div>

                    </div>

                    <div className="ToastifyMessageBody" >
                        <ul>
                            {
                                MessageList.map((msg, index) => (

                                    <li key={"ToastifyMSg " + index}>{msg}</li>
                                ))

                            }


                        </ul>
                    </div>

                    {AutoClose &&
                        <div className="ToastifyFooter">
                        <div className={"ToastifyProgressBar"} >
                            <div className={"ToastifyProgressBarChild " + HeaderBcColor} style={{ width: `${progressBarIndicator}%` }} >
                                {progressBarIndicator + "%"}
                            </div>
                        </div>
                    </div>
                    }
                </div>
            </div>
        </>
    );
};
export default Toastify;
Enter fullscreen mode Exit fullscreen mode

Now Times to call our Message PopupBox and Toastify,for that, i call this both component in App.js file, Code are Below.

*App.js File *

import { useState } from 'react';
import './App.css';
import PopupBox from './component/popup/PopupBox';
import Toastify from './component/toastify/Toastify';

function App() {

    const [msgBox, setMsgBox] = useState("");
    const ClosePopup = (RedirectUrl) => {
        setMsgBox("");

    }

    const ShowMe = (reqType) => {

        if (reqType === "successP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Succes Message" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} ClosePopup={ClosePopup} />);
        } else if (reqType === "errorP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Error Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} ClosePopup={ClosePopup} />);
        } else if (reqType === "warnP") {

            setMsgBox(<PopupBox Message="WelCome Biharisoft,Warnning Message" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} ClosePopup={ClosePopup} />);
        }
        else if (reqType === "successT") {
            setMsgBox(()=>(""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={true} IsWarning={false} IsError={false} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={true} />);
        } else if (reqType === "errorT") {
            setMsgBox(() => (""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={false} IsWarning={false} IsError={true} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={false} />);
        } else if (reqType === "warnT") {
            setMsgBox(() => (""));
            setMsgBox(<Toastify Message="WelCome Biharisoft" RedirectUrl="/Cart" IsSuccess={false} IsWarning={true} IsError={false} ClosePopup={ClosePopup} TimmerSpeedInMiliseconds={50} AutoClose={false} />);
        }

    }

    return (
        <div > {msgBox}
        <div className="App">

          <button className="GreenClr btnshap" onClick={() => { ShowMe("successP") }}>Success Popup </button>
          <button className="YellowClr btnshap" onClick={() => { ShowMe("warnP") }} >Warnig Popup</button>
          <button className="RedClr btnshap" onClick={() => { ShowMe("errorP") }}>Error Popup</button>

          <button className="GreenClr btnshap" onClick={() => { ShowMe("successT") }}>Success toastify </button>
          <button className="YellowClr btnshap" onClick={() => { ShowMe("warnT") }} >Warnig toastify</button>
          <button className="RedClr btnshap" onClick={() => { ShowMe("errorT") }}>Error toastify</button>

            </div>
        </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

*For looking pretty good looking,We need some css for app.js *

app.css


.App {

    display: flex;
    margin: 20px;
    padding: 10px;
}


.GreenClr {
    background: #05b20d;  
}

.YellowClr {
    background: #ee3535;
}

.RedClr {
    background: #ecb90d;
}

.btnshap {
    padding: 8px;
    margin: 3px;
    border-radius: 5px;
    width: 113px;
    text-align:center;
}
    .btnshap:hover{
        color:white;
    }

.IconPopup {
    cursor: pointer;
    margin-left: 8px;
    margin-top: 8px;
}
.SpinnerIcon {
    cursor: pointer;
    margin-top: 3px;
    margin-left: 3px;
}
Enter fullscreen mode Exit fullscreen mode

Wow ! Looking Good , Finally we create our own Popup Message Box Or toastify In React for light weight Code and avoid Security Bridge !

Drop some love by liking or commenting ♥

Reference React

Download Source Code from GitHub Repository

Top comments (0)

Read next

dotnetfullstackdev profile image

Static Keyword in C# Explained in 1 Minute

DotNet Full Stack Dev -

ingosteinke profile image

Accessible, sustainable, and creative web development

Ingo Steinke, web developer -

shajibul_alam_shihab profile image

HTML Element vs HTML Tag

Shajibul Alam Shihab -

mike_andreuzza profile image

We have built a Tailwind CSS grid generator.

Michael Andreuzza -