Dialog

Size

1.88 kb

Create modals and drawers with the native dialog element and the showModal method.

Features

Focus is trapped inside the component
Scroll is trapped inside the component
Top level stacking context
Esc closes the component

Quick Start

First define the dialog components

'use client'
import { defineDialog } from 'crustack/dialog'

const dialog = defineDialog()

The dialog.Root component renders the dialog element. You can control it with isOpen and onClose.

function Example() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open</button>

      <dialog.Root isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <dialog.Title>My first dialog</dialog.Title>
        <dialog.Description>Lorem ipsum dolor sit amet...</dialog.Description>
      </dialog.Root>
    </div>
  )
}

API Reference

`defineDialog`

Read and write from a given storage key

1st argument	type	description
`options.stopEventPropagation`	`string[]`	To prevent unexpected behavior, the `dialog.Root` stops the `onSubmit` event from propagating. You can specify more event names for which you want to stop propagation.

`dialog.Root`

Renders the <dialog> element.

In addition to the following props, all of the dialog element props are available

props	type	default	description
`mandatory`	`boolean`	`false`	Set to `true` to prevent the dialog from closing on: - backdrop click - ESC
`onClose`	`() => void`	-	Called when clicking on the backdrop or pressing ESC. When `mandatory` is `true`, `onClose` is never called
`isOpen`	`boolean`	`false`	Set to `true` to open the dialog.
`children`	`ReactNode`	-	The content of the dialog.

`dialog.Title`

The title of the dialog element.

props	default	description
`as`	`'div'`	The element to render

`dialog.Description`

The description of the dialog element

props	default	description
`as`	`'div'`	The element to render