12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import { useEffect, useRef } from "react"; import { Button } from "ariakit/button"; import { Dialog, DialogDismiss, DialogHeading, useDialogState, } from "ariakit/dialog"; import "./style.css"; export default function Example() { const ref = useRef<HTMLDetailsElement>(null); const dialog = useDialogState(); // Consider clicks before the JavaScript has loaded. useEffect(() => dialog.setOpen(!!ref.current?.open), [dialog.setOpen]); return ( <details ref={ref} open={dialog.mounted} onToggle={(event) => dialog.setOpen(event.currentTarget.open)} > <Button as="summary" className="button"> View details </Button> <Dialog state={dialog} modal={dialog.mounted} hidden={false} className="dialog" > <header className="header"> <DialogHeading className="heading">Apples</DialogHeading> <DialogDismiss className="button dismiss" /> </header> <ul> <li> <strong>Calories:</strong> 95 </li> <li> <strong>Carbs:</strong> 25 grams </li> <li> <strong>Fibers:</strong> 4 grams </li> <li> <strong>Vitamin C:</strong> 14% of the Reference Daily Intake (RDI) </li> <li> <strong>Potassium:</strong> 6% of the RDI </li> <li> <strong>Vitamin K:</strong> 5% of the RDI </li> </ul> </Dialog> </details> ); }