useClickAway
Listen for click events outside the target element.
Overview
Listen for click events outside the target element.
Installation
Open inpnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useClickAway.jsonnpx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useClickAway.jsonyarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useClickAway.jsonbun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useClickAway.jsonListen for click events outside the target element.
Examples
Default usage
Custom DOM
Support multiple DOM
Listen for other events
- By setting eventName, you can specify the event to be listened, Try click the right mouse.
Support multiple events
Support shadow DOM
API
type Target = Element | (() => Element) | React.MutableRefObject<Element>;
type DocumentEventKey = keyof DocumentEventMap;
useClickAway<T extends Event = Event>(
onClickAway: (event: T) => void,
target: Target | Target[],
eventName?: DocumentEventKey | DocumentEventKey[]
);Params
| Property | Description | Type | Default |
|---|---|---|---|
| onClickAway | Trigger Function | (event: T) => void | - |
| target | DOM elements or Ref or Function, support array | Target | Target[] | - |
| eventName | Set the event to be listened, support array | DocumentEventKey | DocumentEventKey[] | click |