rooks/dist/esm/hooks/useMeasure.d.ts

Collection of awesome react hooks

import type { CallbackRef } from "../utils/utils";
/**
 * Options for the useMeasure hook
 */
export interface UseMeasureOptions {
    /**
     * Number of milliseconds to debounce measurements (default: 0)
     */
    debounce?: number;
    /**
     * Whether measurements are disabled (default: false)
     */
    disabled?: boolean;
    /**
     * Callback function called when dimensions change
     */
    onMeasure?: (measurements: UseMeasurements) => void;
}
/**
 * Measurement data returned by useMeasure
 */
export interface UseMeasurements {
    /**
     * Inner width (clientWidth) - content area width excluding scrollbars
     */
    innerWidth: number;
    /**
     * Inner height (clientHeight) - content area height excluding scrollbars
     */
    innerHeight: number;
    /**
     * Total scrollable width (scrollWidth) - width of the entire content area
     */
    innerScrollWidth: number;
    /**
     * Total scrollable height (scrollHeight) - height of the entire content area
     */
    innerScrollHeight: number;
    /**
     * Outer width (offsetWidth) - element width including padding, border, and scrollbars
     */
    outerWidth: number;
    /**
     * Outer height (offsetHeight) - element height including padding, border, and scrollbars
     */
    outerHeight: number;
    /**
     * Outer scrollable width (scrollWidth) - total width of scrollable content
     */
    outerScrollWidth: number;
    /**
     * Outer scrollable height (scrollHeight) - total height of scrollable content
     */
    outerScrollHeight: number;
}
/**
 * Return type of useMeasure hook - tuple with [ref, measurements]
 */
export type UseMeasureReturn = [
    /**
     * Callback ref to attach to the DOM element you want to measure
     */
    CallbackRef,
    /**
     * Object containing all measurement data
     */
    UseMeasurements
];
/**
 * useMeasure hook
 *
 * Measures both inner and outer dimensions of any DOM element in a performant way
 * and updates when dimensions change. Uses ResizeObserver for efficient
 * size change detection.
 *
 * @param options - Configuration options for the hook
 * @returns Object containing ref and measurement data
 * @see https://rooks.vercel.app/docs/hooks/useMeasure
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const [ref, { innerWidth, innerHeight, innerScrollWidth, innerScrollHeight }] = useMeasure();
 *
 *   return (
 *     <div ref={ref}>
 *       <p>Inner dimensions: {innerWidth} x {innerHeight}</p>
 *       <p>Scroll dimensions: {innerScrollWidth} x {innerScrollHeight}</p>
 *     </div>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // With debouncing and callback
 * function MyComponent() {
 *   const [ref, measurements] = useMeasure({
 *     debounce: 100,
 *     onMeasure: (measurements) => {
 *       console.log('Dimensions changed:', measurements);
 *     }
 *   });
 *
 *   return <div ref={ref}>Content here</div>;
 * }
 * ```
 */
declare function useMeasure(options?: UseMeasureOptions): UseMeasureReturn;
export { useMeasure };