c415b2d7f5
* feat: apply full width automatically for DataTable * change implementation * load all columns of insights routing table at the same time * update team member list * sticky columns for >= sm * fix type error --------- Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
32 lines
788 B
TypeScript
32 lines
788 B
TypeScript
// eslint-disable-next-line no-restricted-imports
|
|
import debounce from "lodash/debounce";
|
|
import { useState, useEffect } from "react";
|
|
|
|
export function useDebouncedWidth(ref: React.RefObject<HTMLDivElement>, debounceMs = 100) {
|
|
const [width, setWidth] = useState<number>(0);
|
|
|
|
useEffect(() => {
|
|
if (!ref.current) return;
|
|
|
|
const element = ref.current;
|
|
setWidth(element.clientWidth);
|
|
|
|
const debouncedSetWidth = debounce((width: number) => {
|
|
setWidth(width);
|
|
}, debounceMs);
|
|
|
|
const resizeObserver = new ResizeObserver(([entry]) => {
|
|
debouncedSetWidth(entry.target.clientWidth);
|
|
});
|
|
|
|
resizeObserver.observe(element);
|
|
|
|
return () => {
|
|
resizeObserver.disconnect();
|
|
debouncedSetWidth.cancel();
|
|
};
|
|
}, [ref]);
|
|
|
|
return width;
|
|
}
|