docs(components): Manually Open and Close Dialog

[WillRy]

Hello Everyone,

Sometimes you may want to control the dialog's open state manually, without a trigger component. You can do this by using the open prop and the onOpenChange callback.

This can be useful to demonstrate how to open the dialog without the need for a trigger element. It also demonstrates how to have more control over the dialog; in some scenarios it is necessary to open/close it through local states and even global states.

With these scenarios in mind, I have supplemented the documentation by demonstrating how to manually control the opening of the dialog.

A simple example of what I'm talking about

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

import { useState } from "react";

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

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Are you absolutely sure?</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </DialogDescription>
          </DialogHeader>
        </DialogContent>
      </Dialog>
    </>
  )
}

[vercel]

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.