react-ui-popup

    1.0.32 • Public • Published

    React UI Popup

    What's it?

    1. Popup menu
    2. disvisiable when click the close button

    Whats it look like?

    mb dt

    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(){}

    Install

    npm i react-ui-popup

    DownloadsWeekly Downloads

    189

    Version

    1.0.32

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • kye0038883