useClickAway
Listen for click events outside the target element.
Examples
Default usage
counter:0
Default usage
Please click button or outside of button to show effects.
Custom DOM
counter:0
Support DOM
Support pass in a DOM element or function.
Support multiple DOM
counter:0
Support multiple DOM
Support pass multiple DOM elements.
Listen for other events
counter:0
Listen to other events
By setting eventName, you can specify the event to be listened, Try click the right mouse.
Support multiple events
counter:0
Support multiple events
Set up multiple events, you can try using the mouse click or right click.
API
type Target = Element | (() => Element);type DocumentEventKey = keyof DocumentEventMap;useClickAway<T extends Event = Event>( onClickAway: (event: T) => void, target: Target | Target[], eventName?: DocumentEventKey | DocumentEventKey[]);
type Target = Element | (() => 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, support array | Target | Target[] | - |
| eventName | Set the event to be listened, support array | DocumentEventKey | DocumentEventKey[] | click |