Mask

Mask represents the background modal layer.

<Mask visible={visible} onClickMask={() => setVisible(false)} />

Example

Basic usage of Mask component (click screen to close mask).

Showcase more usage of Mask component.

API

PropertiesDescriptionTypeDefault
afterCloseTriggered when completely closed() => void-
afterShowTriggered after fully displayed() => void-
colorColor of the mask'black' | 'white''black'
destroyOnCloseUninstall content when invisiblebooleanfalse
disableBodyScrollWhether to disable body scrollingbooleantrue
forceRenderRender content forcelybooleanfalse
getContainerTo get the specified mounted HTML node, if null returned, it would be rendered to the current nodeHTMLElement | () => HTMLElement | nullnull
onClickMaskTriggered when the mask is clicked(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void-
opacityOpacity'default' | 'thin' | 'thick' | number'default'
stopPropagationStop the propagation of some events.PropagationEvent[]["click"]
visibleWhether to show or hidebooleantrue
ON THIS PAGE