@synerise/ds-popconfirm v1.0.11
id: popconfirm
title: Popconfirm
Popconfirm UI Component
Installation
npm i @synerise/ds-popconfirm
or
yarn add @synerise/ds-popconfirm
Usage
import Popconfirm from '@synerise/ds-popconfirm';
<Popconfirm title="title" onConfirm={() => alert('confirm')} onCancel={() => alert('cancel')}>
<button>text</button>
</Popconfirm>;
Demo
API
Property | Description | Type | Default |
---|---|---|---|
cancelText | Text of the Cancel button | string | Cancel |
okText | Text of the Confirm button | string | OK |
okType | Button type of the Confirm button | string | primary |
title | Title of the confirmation box | string / React.ReactNode | - |
description | Description of the confirmation box | string / React.ReactNode | - |
images | Urls of images displayed as a carousel | string[] | [] |
imagesAutoplay | Whether to autoplay images | boolean | false |
imagesAutoplaySpeed | Speed of autoplay ms | number | 5000 |
onCancel | Callback of cancel | (e: Event) => void | - |
onConfirm | Callback of confirmation | (e: Event) => void | - |
icon | Customize icon of confirmation | React.ReactNode | <Icon type="exclamation-circle" /> |
disabled | Whether component is disabled | boolean | false |
withLink | Text with highlited text | React.ReactNode | - |
closeIcon | Icon to close popconfirm | React.ReactNode | - |
hideButtons | prop to hide buttons | React.ReactNode | - |
titlePadding | prop to set padding | boolean | false |
buttonsAlign | Sets footer buttons align | 'right' / 'left' / undefined | 'right' |
Popcofirm.ConfirmMessage
Usage
import Popconfirm from '@synerise/ds-popconfirm';
<Popconfirm.ConfirmMessage
title='Copied! Keep it somewhere safe.'
icon={<Icon component={<WarningFillM />} color={'#ffc300'} />}
displayDuration={5000}
placement='topLeft'}
onClick={(showMessage) => {
do sth...
showMessage();
}}
>
<Button>
Click
</Button>
</Popconfirm.ConfirmMessage>
Demo
API
Property | Description | Type | Default |
---|---|---|---|
title | text confirm message | string | - |
icon | icon component | React.ReactNode | - |
displayDuration | confirm message display time in ms | number | 5000 |
placement | position of confirm message left , top , right , bottom , topLeft , topRight , bottomLeft , bottomRight , leftTop , leftBottom, , rightTop , rightBottom | string | topLeft |
onClick | method which returns a showConfirmMessage callback | (showConfirmMessage: () => void) => void | - |
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago