Use Click Outside

Trigger a handler when a click occurs outside a specified element.

import { useEffect, type RefObject } from "react";

export function useClickOutside(
  ref: RefObject<HTMLElement>,
  handler: () => void
) {
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        handler();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [ref, handler]);
}

Use Auto Resize Textarea

Automatically adjust the height of a textarea.

Use Copy to Clipboard

Copy text to the clipboard with optional feedback and callback.