Modal

Modal dialogs.

When To Use

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information.

Examples

import { Modal, useModal } from 'tailor-ui';

Basic

Status bar and icon

Large size

Customized header

Customized footer

Without footer

With button props

onOpenComplete & onCloseComplete

useModal Hooks

You can use the useModal hooks to display Modal without render Modal component in your component.

Confirm

Using callback

Using promise

With other status

Set closable to true

Manual to update and close

API

Modal

Property	Description	Type	Default
title	The modal dialog's title	ReactNode
visible	Whether the modal dialog is visible or not	boolean
closable	Call onCancel when click the close (x) button or modal mask	boolean	true
status	Show the status bar and header icon in modal or null/undefined for no status bar	'info' | 'success' | 'warning' | 'error' | null | undefined
size	The size of modal	'md' | 'lg'	'md'
footer	Footer content, set as footer={null} when you don't need default buttons	ReactNode | null	Confirm and Cancel buttons
onOpenComplete	Whether to mount child components on onClose	() => void
onCloseComplete	Whether to unmount child components on onClose	() => void
confirmText	Text of the Confirm button	string	Confirm
cancelText	Text of the Cancel button	string	Cancel
onConfirm	Specify a function that will be called when a user clicks the Confrim button	(event: MouseEvent) => void
onCancel	Specify a function that will be called when a user clicks mask, close button on top right or Cancel button	(event: MouseEvent) => void
confirmButtonProps	The confirm button props	ButtonProps
cancelButtonProps	The cancel button props	ButtonProps
contentStyle	The style of modal content	CSSProperties
footerStyle	The style of modal footer	CSSProperties

Hooks

const modal = useModal();

• modal.confirm(options) => ReturnValue
• modal.info(options) => ReturnValue
• modal.success(options) => ReturnValue
• modal.warning(options) => ReturnValue
• modal.error(options) => ReturnValue

The ReturnValue can destructing by array or object:

• [confirmation, close, update]
• { confirmation, close, update }

Below is the type of ReturnValue:

• confirmation: Promise<boolean>
• close: () =>void
• update: (options) => void

options

Property	Description	Type	Default
closable	Show cancel button or not	boolean	true if call model.confirm, otherwise will be false
cancelText	Text of the Cancel button	string	Cancel
confirmText	Text of the Confirm button	string	Confirm
onCancel	Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog.	() => void
onConfirm	Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog.	() => void
title	Title	ReactNode
content	content of the message	ReactNode

The options of update function does not accept onConfirm & onCancel.