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