@react-md/utils
Version:
General utils for react-md.
33 lines • 1.39 kB
JavaScript
import { useEffect } from "react";
import { delegateEvent } from "../events/utils";
import { useRefCache } from "../useRefCache";
/**
* This is a simple hook that will attach a throttled resize event listener when
* mounted, and detach when it unmounts.
*
* This hook only works for entire app resize events. If you are looking for
* specific element resize events, check out the `ResizeObserver` component or
* `useResizeObserver` hook instead.
*/
export function useResizeListener(_a) {
var onResize = _a.onResize, options = _a.options, immediate = _a.immediate, _b = _a.enabled, enabled = _b === void 0 ? true : _b;
var callback = useRefCache(onResize);
useEffect(function () {
if (!enabled) {
return;
}
var eventHandler = delegateEvent("resize", window, true, options);
var handler = function (event) { return callback.current(event); };
eventHandler.add(handler);
if (immediate && typeof window !== "undefined") {
window.dispatchEvent(new UIEvent("resize"));
}
return function () {
eventHandler.remove(handler);
};
// disabled since useRefCache for callback and don't want immediate to
// re-trigger it.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [options, enabled]);
}
//# sourceMappingURL=useResizeListener.js.map