react-ui-popup
Version:
70 lines (61 loc) • 2.8 kB
Markdown
# 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(){}|