solid-dismissible is a foundational utility for SolidJS applications, designed to manage the dismissal behavior of UI layers such as dialogs, dropdowns, or tooltips. It provides a headless API, allowing developers to integrate dismissible logic without imposing specific styling or DOM structure. Key features include support for arbitrarily nested dismissible layers, where only the topmost active layer responds to dismiss actions, and multiple dismissal strategies such as outside pointer events (down/up), loss of focus outside the component, and the Escape key. Each strategy can be individually enabled, disabled, or customized. The current version is 0.1.1, and its last publish date was 2 years ago, indicating it is an early-stage library, part of the broader @corvu UI primitives ecosystem for SolidJS. Due to its early version, the API is subject to potential breaking changes in future minor releases, though its core functionality for handling dismissal logic is well-defined. This utility differentiates itself by offering robust nesting capabilities and fine-grained control over dismissal events, making it a powerful tool for complex interactive UIs.
npm install solid-dismissibleVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to create a basic dismissible dialog component using `solid-dismissible`, managing its open state and dismissal logic.
Review the package's changelog or GitHub releases for specific breaking changes when upgrading to new minor versions. Update your component implementations accordingly.
Ensure the `element` prop is always set to a `Signal<HTMLElement | null>` that will eventually resolve to a valid DOM element ref, usually via `ref={setElementRef}`.Always ensure the `enabled` prop accurately reflects the current visibility/interactability of a dismissible layer. Use the `onDismiss` callback to update the state that controls `enabled`, and consider how nested components' `onDismiss` might affect their parents.
Ensure the DOM element for `Dismissible` is rendered and its ref (`element` prop) is available before `Dismissible` attempts to initialize. Use SolidJS's `createSignal` for the ref and conditionally render the dismissible content with `Show` or `onMount` to guarantee the element exists.
Verify that `enabled={true}` when the dismissible layer should be active. Confirm that the `onDismiss` callback correctly updates the state variable (e.g., `setOpen(false)`) that controls the `enabled` prop, causing the component to react and dismiss.Ensure that when a child dismissible layer is `enabled`, any parent dismissible layers have their `enabled` prop dynamically set to `false` or leverage the `activeDismissibles` signal to prevent parent dismissal logic from firing until the child is dismissed. The library handles the core nesting logic, but your state management must reflect the active layer hierarchy.