Files
archived-linsa/web/hooks/use-on-click-outside.ts
Aslam 867478d55c fix: Link, Pages, Topic, Hook and Others (#178)
* chore: remove useKeyDownListener

* chore: remove react-use, update jazz version and add query string

* chore: update jazz version

* chore: use simple mac or win utils code

* feat(util): add isTextInput

* feat(hooks): all needed hooks

* fix: link bunch stuff

* fix: page bunch stuff

* chore: bunch update for custom component

* chore: use throttle from internal hook

* chore: topic bunch stuff

* chore: update layout

* fix: truncate content header of topic detail
2024-09-23 23:16:02 +07:00

29 lines
855 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)
}