React UI Popup

What's it?

1. Popup menu
2. 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(){}|