@supunlakmal/hooks
Version:
A collection of reusable React hooks
44 lines • 2.3 kB
JavaScript
import { useState, useEffect, useRef } from 'react';
import { useRafCallback } from '../performance-optimization/useRafCallback';
// Assuming useResizeObserver returns ResizeObserverEntryExtended | null
// You might need to import ResizeObserverEntryExtended if you use it explicitly below.
import { useResizeObserver } from './useResizeObserver';
// If 'ResizeObserverEntryExtended' is an exported type from your hook's module,
// it's best to import and use it directly for the most precise typing:
// import { useResizeObserver, type ResizeObserverEntryExtended } from './useResizeObserver';
// type ObserverReturnType = ResizeObserverEntryExtended | null;
// If ResizeObserverEntryExtended is not exported or you only need base properties,
// using the standard ResizeObserverEntry is usually sufficient:
/**
* Uses ResizeObserver to track element dimensions and re-render component when they change.
* Provides a ref to attach to the target element.
* Assumes useResizeObserver returns a SINGLE entry object or null.
*
* @template T The type of the DOM element being measured.
* @param enabled Whether resize observation and state updates are enabled. Defaults to true.
* @returns A tuple containing:
* - `measures`: An object with `width` and `height`, or `undefined` if there is no measures.
* - `ref`: A RefObject to attach to the DOM element being measured.
*/
export const useMeasure = (enabled = true) => {
const elementRef = useRef(null);
const [measures, setMeasures] = useState();
const observerHandler = useRafCallback((entry) => {
const { width, height } = entry.contentRect;
setMeasures((prevMeasures) => {
if ((prevMeasures === null || prevMeasures === void 0 ? void 0 : prevMeasures.width) === width && (prevMeasures === null || prevMeasures === void 0 ? void 0 : prevMeasures.height) === height) {
return prevMeasures;
}
return { width, height };
});
});
const entry = useResizeObserver(elementRef);
useEffect(() => {
if (enabled && entry) {
observerHandler(entry);
}
}, [entry, enabled, observerHandler]);
return { measures, ref: elementRef };
};
export default useMeasure;
//# sourceMappingURL=useMeasure.js.map