useClickOutside

Buttons 4

About

React hook to handle click outside of component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds useClickOutside to your project and fits it to your theme.

Code

How useClickOutside is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import 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>
    </>
  );
}