useInteractOutside
Respond to interactions that occur outside an element.
Listen for interactions that occur “outside” of an element, i.e., its ancesotrs or siblings. For example, this can be used as one of the signals to close a modal or dropdown.
import { useInteractOutside } from 'react-gui/use-interact-outside';
const ref = useInteractOutside(InteractOutsideProps);
API #
Return value #
useInteractOutside
returns a React callback ref.
ref (?HTMLElement) => void
A callback ref that must be passed to the target element.
InteractOutsideProps #
disabled boolean
Disable the hook.
onInteractOutside (event: MouseEvent) => void
Called when a click
event is dispatched on an ancestors or sibling of the target.
Examples #
import View from 'react-gui/view';
import { useInteractOutside } from 'react-gui/use-interaction-outside';
function Component() {
const ref = React.useRef(null);
useInteractOutside(ref, {
onInteractOutside
});
return <View ref={ref} />;
}