Next.js Discord

Discord Forum

Detect when Drawer close

Answered
Atlantic mackerel posted this in #help-forum
Open in Discord
Atlantic mackerelOP
I am trying to detect when drawer close the component libs from Shadcn but I don't know at all how to detect it 

  <Drawer>
            <DrawerTrigger asChild >
                <Button variant="outline">NEW POST</Button>
            </DrawerTrigger>
            <DrawerContent>
                <div className="mx-auto w-full max-w-sm">
                    <DrawerHeader>
                        <DrawerTitle>
                            <h1>Title</h1>
                            <Textarea placeholder="Title"/>
                        </DrawerTitle>
                        <h1>Languages</h1>
                        <CarouselDemo/>
                        <DrawerDescription>
                            <Textarea placeholder="Description..."/>
                        </DrawerDescription>

                    </DrawerHeader>
                </div>
            </DrawerContent>
        </Drawer>
Answered by Ray
you could pass the state to Drawer like this
const [open, setOpen] = useState(false)

return (
   <Drawer open={open} onOpenChange={setOpen}>
   ....
)
View full answer

36 Replies

Answer
@Ray you could pass the state to Drawer like this ts const [open, setOpen] = useState(false) return ( <Drawer open={open} onOpenChange={setOpen}> .... )
Atlantic mackerelOP
thank you!!! i didnt know those parameters open, onOpenChange are existed 🙂
@Ray it is builded with radix dialog, you could check the api here https://www.radix-ui.com/primitives/docs/components/dialog
Atlantic mackerelOP
ahh i was confusing 'cause the documents are separated is that document included shadcn libs too?
@Ray no they have referenced the radix doc too
Atlantic mackerelOP
ahh thank you for support 🙂
@Ray no prob
Atlantic mackerelOP
can i show toast on close it??
like below
    useEffect(() => {
        if (open === false) {
            console.log("test")
            toast({
                title: "Scheduled: Catch up ",
                description: "Friday, February 10, 2023 at 5:57 PM",
                action: (
                    <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
                ),
            })
        }
    }, [open]);
or this, so you don't need useEffect
onOpenChange={open => {
  if (open === false) {
      console.log("test")
      toast({
          title: "Scheduled: Catch up ",
          description: "Friday, February 10, 2023 at 5:57 PM",
          action: (
              <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
          ),
      })
  }
  setOpen(open)
}}
@Atlantic mackerel i tried this but still same
Ray
what do you mean same?
Atlantic mackerelOP
i mean didnt work
Ray
do you see console.log("test") on the console
Atlantic mackerelOP
yeah log is worked but that code doesn't work
@Atlantic mackerel yeah log is worked but that code doesn't work
Ray
have you added the <Toaster /> in your layout
@Ray have you added the `<Toaster />` in your layout
Atlantic mackerelOP
oh not yet
sorry i'll check it out
@Ray have you added the `<Toaster />` in your layout
Atlantic mackerelOP
oh after added it, it worked thank you!
but i wonder why it's showing twice
Ray
did you call it on useEffect and onOpenChange
@Ray did you call it on `useEffect` and `onOpenChange`
Atlantic mackerelOP
no
/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false
}

module.exports = nextConfig
even I changed next.config.js but still same
Ray
this doesn't matter
maybe show the code you have
Atlantic mackerelOP
i did this
   const { toast } = useToast()
    const [open, setOpen] = useState(false);

    useEffect(() => {
        if (open === false) {
            console.log("test")
        }
    }, [open]);


Drawer open={open} onOpenChange={open => {
                if (open === false) {
                    console.log("test")
                    toast({
                        title: "Scheduled: Catch up ",
                        description: "Friday, February 10, 2023 at 5:57 PM",
                        action: (
                            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
                        ),
                    })
                }
                setOpen(open)
            }}  >
self solution

    const {toast} = useToast()
    const [open, setOpen] = useState(false);
    const [isShowed, setShowed] = useState(false);

    return (
        <div>

            <Drawer open={open} onOpenChange={open => {
                if (open === false) {
                    console.log("test")
                    if(isShowed == false) { 
                        toast({
                            title: "Scheduled: Catch up ",
                            description: "Friday, February 10, 2023 at 5:57 PM",
                            action: (
                                <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
                            ),
                        })
                        setShowed(false);
                    }
                    setShowed(true);
                }
                setOpen(open)
            }}>
finally it show once !!
@Ray maybe show the code you have
Atlantic mackerelOP
     <Drawer open={open} onOpenChange={open => {
                if (open === false) {
                    console.log("test")
                    if(isShowed == false) {
                        toast({
                            title: "Scheduled: Catch up ",
                            description: "Friday, February 10, 2023 at 5:57 PM",
                            action: (
                                <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
                            ),
                        })
                        setShowed(false);
                    }
                    setShowed(true);
                }
                setOpen(open)
            }}>

i did this, but that setshowed variable won't change why?
Atlantic mackerelOP
oh got it
Atlantic mackerelOP
ahhh i'll try it
@Ray like this
Atlantic mackerelOP
useEffect(() => {
        if(!open){
            toast({
                title: "Post saved!",
                description: "Friday, February 10, 2023 at 5:57 PM",
                action: (
                    <ToastAction altText="Goto schedule to undo">Delete</ToastAction>
                ),
            })
        }
    }, [open]);

    return (
        <div>

            <Drawer open={open} onOpenChange={open => {

                setOpen(open)
            }}>

I this and it worked! thank you