Ark UI

Usage

Begin by importing the necessary components from the package:

import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogPresence,
  DialogTitle,
  DialogTrigger,
  Portal,
} from '@ark-ui/react'

Here is a basic example:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/react'

const Basic = () => (
  <Dialog>
    <DialogTrigger>Open Dialog</DialogTrigger>
    <Portal>
      <DialogBackdrop />
      <DialogContainer>
        <DialogContent>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog Description</DialogDescription>
          <DialogCloseTrigger>Close</DialogCloseTrigger>
        </DialogContent>
      </DialogContainer>
    </Portal>
  </Dialog>
)

import { Portal } from 'solid-js/web'
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/solid'

const Basic = () => {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <Portal>
        <DialogBackdrop />
        <DialogContainer>
          <DialogContent>
            <DialogTitle>Dialog Title</DialogTitle>
            <DialogDescription>Dialog Description</DialogDescription>
            <div>
              <input placeholder="Enter name..." />
              <button>Save</button>
            </div>
            <DialogCloseTrigger>Close</DialogCloseTrigger>
          </DialogContent>
        </DialogContainer>
      </Portal>
    </Dialog>
  )
}

Story not available

Controlled Dialog

To create a controlled Dialog component, manage the state of the dialog using the open and onClose props:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/react'

const Controlled = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>
      <Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
        <Portal>
          <DialogBackdrop />
          <DialogContainer>
            <DialogContent>
              <DialogTitle>Dialog Title</DialogTitle>
              <DialogDescription>Dialog Description</DialogDescription>
              <DialogCloseTrigger>Close</DialogCloseTrigger>
            </DialogContent>
          </DialogContainer>
        </Portal>
      </Dialog>
    </>
  )
}

Story not available

Story not available

Lazy Mounting

Lazy mounting is a feature that allows the content of a dialog to be rendered only when the dialog is first opened. This is useful for performance optimization, especially when dialog content is large or complex. To enable lazy mounting, use the lazyMount prop on the DialogContent component.

In addition, the unmountOnExit prop can be used in conjunction with lazyMount to unmount the dialog content when the Dialog is closed, freeing up resources. The next time the dialog is activated, its content will be re-rendered.

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/react'

const LazyMount = () => (
  <Dialog>
    <DialogTrigger>Open Dialog</DialogTrigger>
    <Portal>
      <DialogBackdrop />
      <DialogContainer>
        <DialogContent lazyMount unmountOnExit>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog Description</DialogDescription>
          <DialogCloseTrigger>Close</DialogCloseTrigger>
        </DialogContent>
      </DialogContainer>
    </Portal>
  </Dialog>
)

Story not available

Story not available

Using Render Function

The Dialog component supports the use of a render function as a child for more control. This allows access to dialog states like isOpen:

import { Portal } from '@zag-js/react'
import { useState } from 'react'
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContainer,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/react'

const RenderFn = () => (
  <Dialog>
    {({ isOpen }) => (
      <>
        <DialogTrigger>Open Dialog</DialogTrigger>
        <Portal>
          <DialogBackdrop />
          <DialogContainer>
            <DialogContent>
              <DialogTitle>Dialog Title</DialogTitle>
              <DialogDescription>Dialog Description</DialogDescription>
              <DialogCloseTrigger>Close</DialogCloseTrigger>
            </DialogContent>
          </DialogContainer>
        </Portal>
        <p>Dialog is {isOpen ? 'open' : 'closed'}</p>
      </>
    )}
  </Dialog>
)

Story not available

Story not available

Conclusion

The Dialog component provides a feature-rich interface for creating dialog windows in your applications. It provides flexibility through a variety of props and configurations, accommodating different design requirements and use cases. From simple modals to complex, state-controlled dialogs, the Dialog component is a versatile tool in a developer’s toolkit.