Components
Loading preview...
React hook to handle click outside of component
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/use-click-outsideimport React, { useRef, useState } from "react";
import clsx from "clsx";
import { useClickOutside } from "@/components/ui/use-click-outside";
export default function DefaultDemo() {
const [open, setOpen] = useState<boolean>(false);
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => setOpen(false));
return (
<>
<button onClick={() => setOpen(true)}>
{!open ? "Open" : "Close"} Drawer
</button>
<div className={clsx(
"fixed top-0 left-0 w-full h-full bg-overlay z-[99999] duration-300",
open ? "opacity-100" : "opacity-0 pointer-events-none"
)}>
</div>
<div
className={clsx(
"fixed bottom-0 left-0 w-full h-1/4 bg-gray-200 shadow-lg transition-transform duration-300 z-[999999] rounded-t-lg",
open ? "translate-y-0" : "translate-y-full"
)}
ref={ref}
>
<div className="h-full flex items-center justify-center">
Click outside
</div>
</div>
</>
);
}