Closed1

shadcn/uiのDialogが閉じれない〜と思ったら、勘違いだった

serinuntiusserinuntius

最近お気に入りのライブラリのshadcn/ui なんですが、それのコンポーネントのDialogが閉じれません。閉じるためのインタフェースが提供されてないというか、、。

大体Propsでflag渡したりで対応すると思うのですが、特にProps見ても生えてなさそう。

shadcn/ui は中でRadixを使ってるので、RadixのDialogを見てみることに👀


<Dialog.Root> にそのような口が生えてるようです。

ですが、shadcn/ui が生成するコンポーネントは <Dialog.Root> を使ってないようです。

ここで2つのオプションがあると思います。

  • <Dialog.Root> でラップして、flagを外部からpropsで触れるようにする
  • <Dialog.Close> というボタンを使う

おそらくどっちでもできるのですが、shadcn/uiIssueを眺めてたら、 <Dialog.Close />

見逃してただけで普通にexportされてました。

const Dialog = DialogPrimitive.Root;

...中略...
export {
  Dialog,
...
}

なのでこんな感じで実装できるはずです。

  const [open, setOpen] = useState(false);
  ... 中略...

  <Dialog open={open} onOpenChange={setOpen}>

参考文献

https://github.com/shadcn-ui/ui/blob/43c4023ed8f8c150cfbd01f5d7fe2773938b25b3/apps/www/registry/default/ui/dialog.tsx#L9
https://www.radix-ui.com/primitives/docs/components/dialog
https://github.com/shadcn-ui/ui/issues/88#issuecomment-1703265089

このスクラップは2023/10/11にクローズされました