CynosureComponents / Foundations
DialogBase
The native <dialog> for Cynosure, and the only module allowed to render one. It is a foundation: thin, unstyled, and meant to be built on by components rather than used in product code.
Who uses itLink to "Who uses it"
When to use it directlyLink to "When to use it directly"
Only when you are building a new overlay that needs a native dialog with behaviour of its own and neither Dialog nor Sheet fits.
UsageLink to "Usage"
tsx
import { DialogBase } from "@arshad-shah/cynosure";
<DialogBase open={open} onCancel={() => setOpen(false)} onClose={() => setOpen(false)} aria-label="Preview">
…
</DialogBase>PropsLink to "Props"
It accepts every native dialog attribute except open, onCancel and onClose, which it owns.
| Prop | What it does | Type | Default |
|---|---|---|---|
openRequired | Shown while true: showModal() (or show() when not modal) and close() follow this prop. | boolean | |
modal | Top layer with the rest of the page inert (default), or an ordinary non-modal dialog. | boolean | |
onCancel | A close request (Escape, the Android back gesture). Its default is prevented so open stays in charge. | (() => void) | |
onClose | The browser closed the dialog while open was still true (a close request it would not let us cancel). | (() => void) |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
GuaranteesLink to "Guarantees"
opendrivesshowModal()(orshow()withmodal={false}) andclose(); never theopenattribute.- A
cancelevent (Escape, the Android back gesture) has its default prevented and callsonCancel, so your state decides. - If the browser closes the dialog anyway (a close request it will not let the page cancel),
onCloseis called so your state can follow. A close you asked for is not reported. - The ref reaches the native
<dialog>. No styling.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.