Closed1
shadcn/uiのDialogが閉じれない〜と思ったら、勘違いだった
serinuntius最近お気に入りのライブラリの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/ui の Issueを眺めてたら、 <Dialog.Close />
見逃してただけで普通にexportされてました。
const Dialog = DialogPrimitive.Root;
...中略...
export {
Dialog,
...
}
なのでこんな感じで実装できるはずです。
const [open, setOpen] = useState(false);
... 中略...
<Dialog open={open} onOpenChange={setOpen}>
参考文献
このスクラップは2023/10/11にクローズされました