Drawer - Detect when it close

[YuInseo]

hey guys, Im trying to make drawer and detect when it close but i cannot found 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>

How can i detect Drawer close?

[brijeshkumar16]

Here is the solution

'use client';

import React, { useEffect, useState } from 'react';

import {
    Drawer,
    DrawerClose,
    DrawerContent,
    DrawerDescription,
    DrawerFooter,
    DrawerHeader,
    DrawerTitle,
    DrawerTrigger,
} from '@/components/ui/drawer';
import { Button } from '@/components/ui/button';

const Demo = () => {
    const [open, setOpen] = useState(false);

    useEffect(() => {
        if (open === false) {
            console.log('Drawer is close');
        }
    }, [open]);

    return (
        <Drawer open={open} onOpenChange={setOpen}>
            <DrawerTrigger>Open</DrawerTrigger>
            <DrawerContent>
                <DrawerHeader>
                    <DrawerTitle>Are you absolutely sure?</DrawerTitle>
                    <DrawerDescription>This action cannot be undone.</DrawerDescription>
                </DrawerHeader>
                <DrawerFooter>
                    <Button>Submit</Button>
                    <DrawerClose>
                        <Button variant='outline'>Cancel</Button>
                    </DrawerClose>
                </DrawerFooter>
            </DrawerContent>
        </Drawer>
    );
};

export default Demo;

[YuInseo]

open={open} onOpenChange={setOpen}

wow i dind't know that parameter exist thank you!!!

[imopbuilder]

@YuInseo

You can use onClose event listener which is present in the Drawer component and will trigger when ever the Drawer closes

It will work when the drawer closes due to outside click or on swipe down.

Infact the drawer component from emilkowalski_ is build on top of radix-ui dialog element. Here are the docs https://www.radix-ui.com/primitives/docs/components/dialog

<Drawer onClose={() => console.log('Drawer closed')}>
	<DrawerTrigger asChild>
		<Button variant='outline'>NEW POST</Button>
	</DrawerTrigger>
	<DrawerContent>
		<div className='mx-auto w-full max-w-sm'>
			<DrawerHeader>
				<DrawerTitle>
					Title
					<Textarea placeholder='Title' />
				</DrawerTitle>
				<h1>Languages</h1>
				<p>Demo</p>
				<DrawerDescription>
					<Textarea placeholder='Description...' />
				</DrawerDescription>
			</DrawerHeader>
		</div>
	</DrawerContent>
</Drawer>

https://github.com/shadcn-ui/ui/assets/150527559/74d9b91f-5acd-4d7d-b4cb-16d7c2d544f5

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[MonaroDaniel]

Guys, do you know if there is any property that I can use to close the drawer as soon as a query ends for example? Not using state