useClickOutside

"use client";
import { useRef, useState } from "react";
import { useClickOutside } from "@/hooks/use-click-outside";
import { Button } from "@/ui/button";

export function UseClickOutsideDemo({ withRef }: { withRef?: boolean }) {
  const [open, setOpen] = useState<boolean>(false);

  const buttonRef = useRef<HTMLButtonElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useClickOutside(() => setOpen(false), [buttonRef, contentRef]);

  return (
    <>
      <Button ref={withRef ? buttonRef : undefined} data-state={open ? "open" : "closed"} onClick={() => setOpen(!open)}>
        {open ? "Close" : "Open"}
      </Button>

      {open && (
        <div
          ref={withRef ? contentRef : undefined}
          data-state={open ? "open" : "closed"}
          className="absolute top-[calc(50%+20px)] rounded-md border bg-background p-4 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100"
        >
          <span>{withRef ? "Click outside to close" : "Can't click outside to close"}</span>
        </div>
      )}
    </>
  );
}