rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
60 lines (59 loc) • 2.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOutsideClick = void 0;
var react_1 = require("react");
var noop_1 = require("../utils/noop");
/**
* useOutsideClick hook
* Checks if a click happened outside a Ref. Handy for dropdowns, modals and popups etc.
*
* @param ref Ref whose outside click needs to be listened to
* @param handler Callback to fire on outside click
* @param when A boolean which which activates the hook only when it is true. Useful for conditionally enable the outside click
* @see https://react-hooks.org/docs/useOutsideClick
* @example
* ```tsx
* import { useOutsideClick } from "./useOutsideClick";
* import { useRef } from "react";
* import { noop } from "../utils/noop";
*
* const MyComponent = () => {
* const ref = useRef<HTMLDivElement>(null);
* const [isOpen, setIsOpen] = useState(false);
* const handleOutsideClick = () => setIsOpen(false);
* useOutsideClick(ref, handleOutsideClick);
* return (
* <div ref={ref}>
* <button onClick={() => setIsOpen(true)}>Open</button>
* {isOpen && (
* <div>Inside</div>
* )}
* </div>
* );
* }
* ```
*/
function useOutsideClick(ref, handler, when) {
if (when === void 0) { when = true; }
var savedHandler = (0, react_1.useRef)(handler);
var memoizedCallback = (0, react_1.useCallback)(function (event) {
if (ref.current && !ref.current.contains(event.target)) {
savedHandler.current(event);
}
}, [ref]);
(0, react_1.useEffect)(function () {
savedHandler.current = handler;
});
(0, react_1.useEffect)(function () {
if (when) {
document.addEventListener("click", memoizedCallback, true);
document.addEventListener("ontouchstart", memoizedCallback, true);
return function () {
document.removeEventListener("click", memoizedCallback, true);
document.removeEventListener("ontouchstart", memoizedCallback, true);
};
}
return noop_1.noop;
}, [ref, handler, when, memoizedCallback]);
}
exports.useOutsideClick = useOutsideClick;