useClickAway

Detect clicks outside of an element.

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

API Reference

Installation

terminal
pnpm add @shak-hooks/usehooks
import.ts
import { useClickAway } from "@shak-hooks/usehooks";
Source: packages/react/src/useClickAway.ts

Signature

signature.ts
export function useClickAway<T extends Event = Event>(ref: RefObject<HTMLElement | null>, handler: (event: T) => void, events: string[] = ['mousedown', 'touchstart'])

Parameters

NameTypeOptionalDefault
refRefObject<HTMLElement | null>No-
handler(event: T) => voidNo-
eventsstring[]Yes['mousedown', 'touchstart']

Returns

unknown

Implementation

use-click-away.ts
1import { useEffect, useRef } from "react";
2
3export function useClickAway(
4 ref: React.RefObject<HTMLElement>,
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 };
14
15 document.addEventListener("mousedown", listener);
16 document.addEventListener("touchstart", listener);
17
18 return () => {
19 document.removeEventListener("mousedown", listener);
20 document.removeEventListener("touchstart", listener);
21 };
22 }, [ref, handler]);
23}

Advertisement

Google Ads

Usage

example.tsx
1import { useClickAway } from "@shak-hooks/usehooks";
2
3const result = useClickAway(null, undefined, undefined);
4// result: unknown
5// Use values directly (React state).

Let‘s do great work together

Empowering creators with free, high-performance AI, SEO, and developer tools. Join thousands of users optimizing their workflow with Shak-Tools.

Tools10+ Free
UsersGlobal

Stay in the loop

Join our newsletter for the latest AI tools and updates.

ShakTools
© 2025 Shaktools. All Rights Reserved.Privacy Policy