useClickOutside

Detects when the user clicks outside a specified element.

Installation

npx rabbithook@latest add use-click-outside

Usage

App.tsx

import useClickOutside from "@/hooks/use-click-outside";

function Component() {
  const ref = useRef<HTMLDivElement>(null);
  const clickedOutside = useClickOutside(ref);

  return (
    <div ref={ref} />
  )
}

Code

Typescript

use-click-outside.ts

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useClickOutside(ref: React.RefObject<HTMLElement>) {
  const [clickedOutside, setClickedOutside] = useState(false);

  function handleClickOutside(event: MouseEvent) {
    if (ref.current && !ref.current.contains(event.target as Node)) {
      setClickedOutside(true);

      return;
    }

    setClickedOutside(false);
  }

  useEventListener("mousedown", handleClickOutside);

  return clickedOutside;
}

export default useClickOutside;

Javascript

use-click-outside.js

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useClickOutside(ref) {
  const [clickedOutside, setClickedOutside] = useState(false);

  function handleClickOutside(event) {
    if (ref.current && !ref.current.contains(event.target)) {
      setClickedOutside(true);

      return;
    }

    setClickedOutside(false);
  }

  useEventListener("mousedown", handleClickOutside);

  return clickedOutside;
}

export default useClickOutside;