Shadcn Hooks

useClickAway

A hook to click away from an element

Loading...

Installation

npx shadcn@latest add @shadcnhooks/use-click-away

API

type TargetValue<T> = T | undefined | null

type TargetType = HTMLElement | Element | Window | Document

type BasicTarget<T extends TargetType = Element> =
  | (() => TargetValue<T>)
  | TargetValue<T>
  | RefObject<TargetValue<T>>

type DocumentEventKey = keyof DocumentEventMap

/**
 * A hook to click away from an element
 * @param onClickAway - The function to call when the user clicks away from the target
 * @param target - The target to click away from
 * @param eventName - The event to listen for
/**
 * A hook to click away from an element
 * @param onClickAway - The function to call when the user clicks away from the target
 * @param target - The target to click away from
 * @param eventName - The event to listen for
 */
 */
export function useClickAway<T extends Event = Event>(
  onClickAway: (event: T) => void,
  target: BasicTarget | BasicTarget[],
  eventName?: DocumentEventKey | DocumentEventKey[],
): void

Credits

Last updated on

On this page