useOnClickOutside
Run a callback when a press lands outside one or more elements.
Listens for pointerdown on the document and calls the handler when the target is outside every ref, for custom panels and inline editors. Pass several refs, such as a trigger and its panel.
Usage
Examples
Commit an inline editor
Trigger and panel together
API
3 options
1 return value
Accessibility
An outside click is a pointer shortcut. Also close on Escape and return focus to the trigger, so keyboard users can dismiss the panel.
Notes
- Popover, Dialog, Select and menus already dismiss themselves.
Related
PopoverPopover renders compact positioned supporting content next to its trigger.8 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examples