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