Configuration:

• The <PopupComponent> can accept any element between the opening and closing tag, this is the content of the popup.

  
      <PopupComponent 
          triggerOnDelay={false}
          triggerOnScroll={true}
          scrollTriggerDistance={400}
          delay={3000}
          zIndex={100}
          overlayStyles={{backgroundColor: "#131313", opacity: "0.8"}}
          popupWrapperStyles={{backgroundColor: "white", width: "60%", height: "500px"}}
          popupContentStyles={{padding: "1rem"}}
          closeIcon={<Image alt="" src={CloseIcon} height={24} width={24}></Image>}
          closeIconStyles={{padding: "1rem"}}
          cookieName={"custompopup"}
          cookieExpirationDays={1}
      >
          <h2>Example Popup Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat, leo vel sodales auctor, lorem leo vehicula magna, nec tincidunt leo nunc vel diam. Aenean aliquet eleifend volutpat.</p> 
          <button>Click Here!</button>
      </PopupComponent>  
  

• On delay popup trigger type.

  triggerOnDelay={false}

• Delay trigger time.

  delay={3000}

• On scroll popup trigger type.

  triggerOnScroll={true}

• Scroll trigger distance.

  scrollTriggerDistance={400}

• Z-index for modal.

  zIndex={100}

• Overlay styles.

  overlayStyles={{backgroundColor: "#131313", opacity: "0.8"}}

• Popup wrapper styles.

  popupWrapperStyles={{backgroundColor: "white", width: "60%", height: "500px"}}

• Popup content styles.

  popupContentStyles={{padding: "1rem"}}

• Close icon, Accepts strings, React elements and HTML.

  closeIcon={<Image alt="" src={CloseIcon} height={24} width={24}></Image>}

• Close icon styles.

  closeIconStyles={{padding: "1rem"}}

• Cookie name.

  cookieName={"custompopup"}

• Days untill cookie expires.

  cookieExpirationDays={1}