shadcn/ui Dialog
open の管理は内部に閉じながら、Trigger の見た目のみ利用側で指定する
const SomeDialog: React.FC<{
triggerProps: React.ComponentProps<typeof DialogTrigger>
}> = ({ triggerProps }) => {
const [open, setOpen] = useState(false)
// [Next.js で searchParams を使う場合]
// const searchParams = useSearchParams()
// const open = searchParams.get('some') != null
// const setOpen = (open: boolean) => {
// const newSearchParams = new URLSearchParams(searchParams)
// if (open) {
// newSearchParams.set('some', '1')
// } else {
// newSearchParams.delete('some')
// }
// router.push(`?${newSearchParams}`)
// }
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger {...triggerProps} />
<DialogContent>
<DialogHeader>
<DialogTitle>{/* Title */}</DialogTitle>
</DialogHeader>
{/* Content*/}
<DialogFooter>
{/* Footer */}
</DialogFooter>
</DialogContent>
</Dialog>
)
}
<SomeDialog triggerProps={{
asChild: true,
children: (
<Button type="button">Open</Button>
)
}} />
<SomeDialog triggerProps={{
asChild: true,
children: (
<Button type="button" variant="ghost" size="icon">
<PlusIcon />
</Button>
)
}} />