mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
29 lines
886 B
TypeScript
29 lines
886 B
TypeScript
import * as React from "react"
|
|
import { useEventListener } from "./use-event-listener"
|
|
|
|
/**
|
|
* Hook to detect clicks outside of a specified element.
|
|
*
|
|
* @param ref The React ref to the element.
|
|
* @param callback The handler to call when a click outside the element is detected.
|
|
*/
|
|
export function useOnClickOutside(
|
|
ref: React.RefObject<HTMLElement | null>,
|
|
callback?: (event: MouseEvent | TouchEvent) => void,
|
|
options: AddEventListenerOptions = {},
|
|
) {
|
|
const listener = React.useCallback(
|
|
(event: MouseEvent | TouchEvent) => {
|
|
// Do nothing if clicking ref's element or descendent elements
|
|
if (!ref.current || ref.current.contains(event.target as Node)) {
|
|
return
|
|
}
|
|
callback?.(event)
|
|
},
|
|
[ref, callback],
|
|
)
|
|
|
|
useEventListener("mousedown", listener, window, options)
|
|
useEventListener("touchstart", listener, window, options)
|
|
}
|