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

Name	Type	Optional	Default
ref	RefObject<HTMLElement \| null>	No	-
handler	(event: T) => void	No	-
events	string[]	Yes	['mousedown', 'touchstart']

Returns

unknown

Implementation

use-click-away.ts

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

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 };

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 { useClickAway } from "@shak-hooks/usehooks";

3const result = useClickAway(null, undefined, undefined);

4// result: unknown

5// Use values directly (React state).