solid-dismissible

SolidJS utility for creating dismissible, nestable layers. Offers different strategies to dismiss the layer, such as on outside click, escape key press, or outside focus.

Features

- Supports nested layers
- Dismiss on outside pointer down/up, outside focus or escape key
- Is headless, doesn\'t create extra DOM elements
- Every dismiss strategy can be disabled/customized
- Events can be cancelled
- Compatible with corvu primitives as they use this utility

Usage

``tsx
import Dismissible from 'solid-dismissible'
`

`tsx
const DialogContent: Component<{
open: boolean
setOpen: (open: boolean) => void
}> = (props) => {
const [contentRef, setContentRef] = createSignal(null)

return (
element={contentRef}
enabled={open()}
onDismiss={() => setOpen(false)}
>






)
}
`

$3

The utility exports a activeDismissibles signal that can be used to track active dismissibles. It includes an array of all currently active dismissible ids.

`tsx
import { activeDismissibles } from 'solid-dismissible'

createEffect(() => {
console.log('Currently active dismissibles: ', activeDismissibles())
})
``

Further Reading

This utility is from the maintainers of corvu, a collection of unstyled, accessible and customizable UI primitives for SolidJS. It is also documented in the corvu docs under Dismissible.