React-ui-popup NPM

React UI Popup

What's it?

Popup menu
disvisiable when click the close button

Whats it look like?

install

npm install --save-dev react-ui-popup

import

import PopupMenu from 'react-ui-popup';

<PopupMenu {...{
    title: 'Lorem Ipsum',
    content: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
    theme: 'dark',
    background: {
        dataSets: {
            0: {
                src: 'https://staging-ap01-itapparels.demandware.net/on/demandware.static/-/Sites-IT-HK-Library/default/dwe2d7ce88/landingPageCreative/2022/1/w2/HK_BIT_MiniPopUp_DT_SnowPeak_ForkSet_GWP_Mockup_Bkg_v3.jpg', width: 295, height: 188
            }
        },
        alt: 'test'
    },
    ctaEnter: {
        content: 'Register Now'
    },
    href: "https://www.google.com/",
    startFunc, closeFunc, enterFunc, hoverFunc,
    customClass:{
        container, 
        background,
        desc,
        title,
        content,
        ctaEnter,
        ctaClose
    }
}}/>

Props

attribute	description	type	PropType	default
title	title of article	string		Lorem Ipsum
content	content of article	sting		Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
href	link of cta	sting		https://www.google.com/
background	responsive image sets of background	object		{dataSets:{}}
classPopup	pass your own class to update popup appearance	string		{ section: '', article: '', main: '', title: '', content: '' }
classCtaEnter	pass your own class to update CTA enter appearance	string		{ href: '', svg: '' }
classCtaClose	pass your own class to update CTA Close appearance	string		{ href: '', svg: '' }
theme	what theme they are	string	light, dark	light
cookieName	what's the name of cookie to store the status of popup	string		popupChecking20210730
startFunc({...props, ...{ isHover: isHover, isVisiable: isVisiable }})	What it do at the beginning	function		function(){}
enterLabel	The content of enter cta	string		enter
closeFunc({...props, ...{ isHover: isHover, isVisiable: isVisiable }})	What it do when close the prop	function		function(){}
enterFunc({...props, ...{ isHover: isHover, isVisiable: isVisiable }})	What it do when click the cta	function		function(){}
hoverFunc({...props, ...{ isHover: isHover, isVisiable: isVisiable }})	What it do when hover the popup	function		function(){}