Popup

More commonly known as Modal, it is used to provide supplementary information or request user input, needed to complete a user's workflow.

Preview

Usage

The popup component uses a custom hook called usePopup.

npm i react-hartan

import { Popup } from "react-hartan"

function App() {

  return (
    <>
      <Popup></Popup>
    </>
  )
}

export default App

Customization With Props

• buttonText -> Accepts a string/node value, used as the button name used to open popup.

• userButtonStyle -> Accepts class name(s) as string, custom styling prop for button used to open popup.

• popupContentBoxMaterialHeading -> Accepts a string/node value, used as the heading inside popup.

• popupContentBoxMaterialPara -> Accepts a string/node value, used as the content inside popup.

• popupContentBoxMaterialButtonText -> Accepts a string/node value, used as the button name inside the popup.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userPopupStyle -> Accepts class name(s) as string, custom styling prop for the container containing the popup button and the hidden modal container.

• userPopupContentStyle -> Accepts class name(s) as string, custom styling prop for the hidden modal container.

• userPopupContentBoxStyle -> Accepts class name(s) as string, custom styling prop for the content container inside the above hidden modal container.

• userCancelButtonStyle -> Accepts class name(s) as string, custom styling prop for the cancel button inside the hidden popup, used to close the popup.

• userPopupContentBoxMaterialStyle -> Accepts class name(s) as string, custom styling prop for the container containing the heading, paragraph and a button.

• userButtonStyleInsidePopup -> Accepts class name(s) as string, custom styling prop for the button inside the popup.

• onClickFunction -> Accepts a function, written by user, used to handle logic on button click.

Default

import { Popup } from "react-hartan"

function App() {

  return (
    <>
      <Popup></Popup>
    </>
  )
}

export default App

With Custom Props

// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Popup } from "react-hartan"

function App() {

  return (
    <>
      <Popup userPopupStyle={"bg-red"} userPopupContentBoxMaterialStyle={"bg-pink"}></Popup>
    </>
  )
}

export default App

Component Code

This is the code for the Popup component.

Popup.jsx

import Button from "../Button/Button"
import popupStyle from "./Popup.module.css"
import usePopup from "../../Hooks/Popup"
import PropTypes from "prop-types"

const material = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta sapiente, molestiae earum non, vel quo delectus, aliquid nostrum officia alias voluptates! Itaque ratione exercitationem nostrum, molestiae illo, fugit laudantium perspiciatis maiores tempora provident nihil praesentium dignissimos amet illum accusamus natus rerum quam assumenda fuga ipsum dolorem ducimus animi. Eos, dolores!";

export default function Popup({ buttonText = "Popup", userButtonStyle, onClickFunction, popupContentBoxMaterialHeading = "This is a Popup", popupContentBoxMaterialPara = material, popupContentBoxMaterialButtonText = "Download", id, userPopupStyle, userPopupContentStyle, userPopupContentBoxStyle, userPopupContentBoxMaterialStyle, userCancelButtonStyle, userButtonStyleInsidePopup }) {

    const [showPopup, popupRef, popupState, closePopup] = usePopup(false);

    return (
        <section className={`${userPopupStyle}`}>
            <Button userButtonStyle={userButtonStyle} buttonText={buttonText} onClickFunction={() => popupState(true)} />
            {
                showPopup &&
                <div className={`${popupStyle.popupContent} ${userPopupContentStyle}`}>
                    <div className={`${popupStyle.popupContentBox} ${userPopupContentBoxStyle}`} onClick={closePopup} ref={popupRef}>
                        <span className={`${popupStyle.cancelBtn} ${userCancelButtonStyle}`} onClick={() => popupState(false)}>
                            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="15" viewBox="0 0 384 512"><path fill="#ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" /></svg>
                        </span>
                        <div className={`${popupStyle.popupContentBoxMaterial} ${userPopupContentBoxMaterialStyle}`}>
                            <h1>{popupContentBoxMaterialHeading}</h1>
                            <div>{popupContentBoxMaterialPara}</div>
                            <Button userButtonStyle={userButtonStyleInsidePopup} buttonText={popupContentBoxMaterialButtonText} onClickFunction={onClickFunction}></Button>
                        </div>
                    </div>
                </div>
            }
        </section>
    )
}

Popup.propTypes = {
    buttonText: PropTypes.node,
    userButtonStyle: PropTypes.string,
    onClickFunction: PropTypes.func,
    popupContentBoxMaterialHeading: PropTypes.node,
    popupContentBoxMaterialPara: PropTypes.node,
    popupContentBoxMaterialButtonText: PropTypes.node,
    id: PropTypes.string,
    userPopupStyle: PropTypes.string,
    userPopupContentStyle: PropTypes.string,
    userPopupContentBoxStyle: PropTypes.string,
    userPopupContentBoxMaterialStyle: PropTypes.string,
    userCancelButtonStyle: PropTypes.string,
    userButtonStyleInsidePopup: PropTypes.string
};

Popup.module.css

/* Popup Styling */

/* Popup content container */
.popupContent {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(.5rem);
    display: flex;
    justify-content: center;
}

/* Container inside popup content container */
.popupContentBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 5rem;
}

/* Cancel button inside popup content box */
.popupContentBox .cancelBtn {
    place-self: end;
    cursor: pointer;
}

/* Popup content box material container */
.popupContentBoxMaterial {
    background-color: #1e90ff;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    border-radius: .5rem;
}

.popupContentBoxMaterial h1 {
    font-size: 3rem;
}

.popupContentBoxMaterial div {
    font-size: 1.5rem;
    font-weight: 500;
}

/* Button inside the popup content box container */
.popupContentBoxMaterial button {
    place-self: center;
}