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} />;
}
Updated
Edit
React GUICopyright © Facebook Inc.