# React UI Popup

## What's it?
1. Popup menu
2. disvisiable when click the close button

## Whats it look like?
![mb](https://user-images.githubusercontent.com/50726256/127622081-af822fe6-4397-47d4-be1b-8d25ee1ee5a6.jpg)
![dt](https://user-images.githubusercontent.com/50726256/127622085-79fd113e-bfd3-4c56-acf3-ffe905f2df20.jpg)


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