useOnClickOutside

Detect clicks outside of a specified element.

https://www.shaktools.com/shak-hooks

Sensor

API Reference

Installation

terminal

pnpm add @/hooks/useOnClickOutside

import.ts

import { useOnClickOutside } from "@/hooks/useOnClickOutside";

Source: constants/hooks.ts

Signature

signature.ts

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void)

Parameters

Name	Type	Optional	Default
ref	RefObject<T>	No	-
handler	(event: MouseEvent \| TouchEvent) => void	No	-

Returns

unknown

Implementation

use-on-click-outside.ts

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

3export function useOnClickOutside<T extends HTMLElement = HTMLElement>(

4 ref: RefObject<T>,

5 handler: (event: MouseEvent | TouchEvent) => void

6) {

7 useEffect(() => {

8 const listener = (event: MouseEvent | TouchEvent) => {

9 if (!ref.current || ref.current.contains(event.target as Node)) {

10 return;

11 }

12 handler(event);

13 };

15 document.addEventListener("mousedown", listener);

16 document.addEventListener("touchstart", listener);

18 return () => {

19 document.removeEventListener("mousedown", listener);

20 document.removeEventListener("touchstart", listener);

21 };

22 }, [ref, handler]);

23}

Google Ads

Usage

example.tsx

1import { useOnClickOutside } from "@/hooks/useOnClickOutside";

3const ref = useRef(null);

4useOnClickOutside(ref, () => {

5 // ...

6});