@tolokoban/ui
Version:
React components with theme
39 lines • 3.23 kB
JavaScript
import { asyncCreateDebouncer } from "./../util/async.js";
import * as React from "react";
/**
* Force a rerender as soon as an observed element changed its size.
* The rerender can also be debounced.
* @param refElem Reference of the element whose size we want to observe.
* @param debounceDelay If defined, debounce the dimension update.
* @returns `[width, height]`
*/
export function useResizeObserver(element, debounceDelay) {
const [size, setSize] = React.useState(getInitialSize(element));
const updateSize = React.useMemo(() => {
const updater = (size) => setSize([...size]);
if (typeof debounceDelay === "number" && debounceDelay > 0) {
return asyncCreateDebouncer(updater, debounceDelay);
}
else {
return updater;
}
}, [debounceDelay]);
React.useEffect(() => {
setSize(getInitialSize(element));
if (!element)
return;
const observer = new ResizeObserver(() => {
const { width, height } = element.getBoundingClientRect();
updateSize([width, height]);
});
observer.observe(element);
return () => observer.unobserve(element);
}, [element, updateSize]);
return size;
}
function getInitialSize(element) {
if (!element)
return [0, 0];
return [element.clientWidth, element.clientHeight];
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXplLW9ic2VydmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2hvb2tzL3Jlc2l6ZS1vYnNlcnZlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDbkQsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUI7Ozs7OztHQU1HO0FBQ0gsTUFBTSxVQUFVLGlCQUFpQixDQUM3QixPQUF3QyxFQUN4QyxhQUFzQjtJQUV0QixNQUFNLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQ2xDLGNBQWMsQ0FBQyxPQUFPLENBQUMsQ0FDMUIsQ0FBQTtJQUNELE1BQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsR0FBRyxFQUFFO1FBQ2xDLE1BQU0sT0FBTyxHQUFHLENBQUMsSUFBcUMsRUFBRSxFQUFFLENBQ3RELE9BQU8sQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQTtRQUN0QixJQUFJLE9BQU8sYUFBYSxLQUFLLFFBQVEsSUFBSSxhQUFhLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDekQsT0FBTyxvQkFBb0IsQ0FBQyxPQUFPLEVBQUUsYUFBYSxDQUFDLENBQUE7UUFDdkQsQ0FBQzthQUFNLENBQUM7WUFDSixPQUFPLE9BQU8sQ0FBQTtRQUNsQixDQUFDO0lBQ0wsQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQTtJQUNuQixLQUFLLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNqQixPQUFPLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUE7UUFDaEMsSUFBSSxDQUFDLE9BQU87WUFBRSxPQUFNO1FBRXBCLE1BQU0sUUFBUSxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtZQUNyQyxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxHQUFHLE9BQU8sQ0FBQyxxQkFBcUIsRUFBRSxDQUFBO1lBQ3pELFVBQVUsQ0FBQyxDQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFBO1FBQy9CLENBQUMsQ0FBQyxDQUFBO1FBQ0YsUUFBUSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQTtRQUN6QixPQUFPLEdBQUcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUE7SUFDNUMsQ0FBQyxFQUFFLENBQUMsT0FBTyxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUE7SUFDekIsT0FBTyxJQUFJLENBQUE7QUFDZixDQUFDO0FBRUQsU0FBUyxjQUFjLENBQ25CLE9BQXdDO0lBRXhDLElBQUksQ0FBQyxPQUFPO1FBQUUsT0FBTyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUUzQixPQUFPLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxPQUFPLENBQUMsWUFBWSxDQUFDLENBQUE7QUFDdEQsQ0FBQyJ9