Popup

Demo

Install

import React from 'react';
import { Popup } from 'vant-react';

Usage

Every popup should have its own state.

const [centerPopup, setCenterPopup] = useState(false);

<Button click={() => {setCenterPopup(true)}}/>
<Popup isActive={centerPopup} setActive={setCenterPopup} />

Type

<Popup type='top'/>
<Popup type='bottom'/>
<Popup type='left'/>
<Popup type='right'/>

Size

<Popup size={{width:'200px', height:'200px'}} />
<Popup size={{width:'50vwx', height:'60vh'}} />

Content

<Popup text={{
          text: 'It`s a popup',
          color: '#666',
          fontSize: '30px',
          textAlign: 'center'
        }} />
<Popup content={<Component />} />

CloseIcon

<Popup closeable />
<Popup closeable closeIcon={{ name: 'close', size: '20px' }} />
<Popup closeable closeIconPosition={{ top: '40px', left: '40px' }} />

Round Corner

<Popup borderRadius='50px' />

Custom Color

<Popup color='#b90000' />
<Popup color='rgba(234, 123, 232,0.4)' />

Action

<Popup text={{
          text: 'Click me',
          color: '#000',
          fontSize: '30px',
          textAlign: 'center'
        }}
       size={{width:'300px', height:'60vh'}}
       click={(e) => { alert(e) }} />

API

Props

Attribute	Description	Type	Default	Required
type	Can be set to left right top bottom	string	center	optional
text	Text to be displayed in popup ,{text,color,size, textAlign}	object	-	optional
color	Popup background-color, in hex value:#b90000, in gradient value in rgba:rgb(210,210,210,0.4)	string	-	optional
borderRadius	round corner	string	-	optional
size	popup size , { width: '10px', height: '100vh' }	object	-	optional
padding	content padding , 10px 0 20px	string	-	optional
content	Component to be displayed in popup	React Element	-	optional
closeable	show close icon in popup	boolean	false	optional
closeIcon	custom your close icon ,{iconName, iconSize}	object	-	optional
closeIconPosition	Ex: { top: '40px', left: '40px' }	object	-	optional

Event

Event	Description	Arguments
click	Triggered when click text in popup and not disabled or loading	event: Event