Dismissable Layer
Lower level component for creating nested layers that can be dismissed one by one by user interactions.
Import#
import { DismissableLayer } from '@volue/wave-react';
Examples#
Basic#
By default, DismissableLayer can be dismissed by clicking or touching anywhere outside of it or by pressing Escape key.
Prevent dismiss#
By calling event.preventDefault inside onPointerDownOutside or onEscapeKeyDown handlers, you can prevent the layer from dismissing.
Nested#
Given a group of nested layers, each DismissableLayer should dismiss just itself. This comes useful in scenarios such as opening a Popover inside a Dialog.
API Reference#
Prop | Type | Default |
|---|---|---|
as | enum | div |
css | StitchesCss | No default value |
onDismiss | function | No default value |
onPointerDownOutside | function | No default value |
onEscapeKeyDown | function | No default value |