Components

ComfirmDialog

The ConfirmDialog component is used to display a confirmation dialog before performing important actions, such as deleting items or applying changes, by providing confirmation and cancellation options to the user

Imports

The first alternative is recommended since it can reduce the application bundle

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'

1import { ConfirmDialog } from 'dd360-ds'

Usage

Use the ConfirmDialog component as shown below:

The code snippet below shows how to use the ConfirmDialog component:

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    onConfirm={()=>alert('onConfirm')}>
5    You want to confirm?
6</ConfirmDialog>
7

Title

The prop title is used to display a descriptive title in the confirmation dialog

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    title='Example title'
5    onConfirm={()=>alert('onConfirm')}>
6    You want to confirm?
7</ConfirmDialog>
8

Text Confirm Btn

The prop textConfirmBtn is used to define the text of the confirmation button in the dialog box

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    textConfirmBtn='Example Confirm'
5    onConfirm={()=>alert('onConfirm')}>
6    You want to confirm?
7</ConfirmDialog>
8

On Cancel and Text Cancel Btn

The props onCancel and textCancelBtn they are used to cancel the confirmDialog, onCancel should carry the function that closes it and textCancelBtn the text that you want it to carry

Note that it is recommended that the textCancelBtn and handleCancel props be defined together, as defining only textCancelBtn would not make much sense

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    onCancel={()=>alert('Cancel')} 
5    textCancelBtn='Example Confirm'
6    onConfirm={()=>alert('onConfirm')}>
7    You want to confirm?
8</ConfirmDialog>
9

Width

The prop width is used to set the custom width of the confirmation dialog to

1import ConfirmDialog from 'dd360-ds/ConfirmDialog'
2
3<ConfirmDialog
4    width={300} 
5    onConfirm={()=>alert('onConfirm')}>
6    You want to confirm?
7</ConfirmDialog>
8

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.