@react-hookz/web
Version:
React hooks done right, for browser and SSR.
47 lines (46 loc) • 1.95 kB
JavaScript
;
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useClickOutside = void 0;
var react_1 = require("react");
var misc_1 = require("../util/misc");
var __1 = require("..");
var DEFAULT_EVENTS = ['mousedown', 'touchstart'];
/**
* Triggers callback when user clicks outside the target element.
*
* @param ref React ref object with target HTML element.
* @param callback Callback that will be triggered during the click.
* @param events Events list that will be used as triggers for outside click.
* Default: 'mousedown', 'touchstart'
*/
function useClickOutside(ref, callback, events) {
if (events === void 0) { events = DEFAULT_EVENTS; }
var cbRef = (0, __1.useSyncedRef)(callback);
var refRef = (0, __1.useSyncedRef)(ref);
(0, react_1.useEffect)(function () {
function handler(event) {
if (!refRef.current.current)
return;
var evtTarget = event.target;
var cb = cbRef.current;
if (!evtTarget || (!!evtTarget && !refRef.current.current.contains(evtTarget))) {
cb.call(this, event);
}
}
events.forEach(function (name) { return (0, misc_1.on)(document, name, handler, { passive: true }); });
return function () {
events.forEach(function (name) { return (0, misc_1.off)(document, name, handler, { passive: true }); });
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, __spreadArray([], events, true));
}
exports.useClickOutside = useClickOutside;