react-resize-detector/build/utils.d.ts

React resize detector

import * as React from 'react';
import type { DebouncedFunc } from 'lodash';
import { OnRefChangeType, Props } from './types.js';
export type PatchedResizeObserverCallback = DebouncedFunc<ResizeObserverCallback> | ResizeObserverCallback;
/**
 * Wraps the resize callback with a lodash debounce / throttle based on the refresh mode
 */
export declare const patchResizeCallback: (resizeCallback: ResizeObserverCallback, refreshMode: Props["refreshMode"], refreshRate: Props["refreshRate"], refreshOptions: Props["refreshOptions"]) => PatchedResizeObserverCallback;
/**
 * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
 * prop or avoid re-executing effects when passed as a dependency
 */
export declare const useCallbackRef: <T extends (...args: any[]) => any>(callback: T | undefined) => T;
/** `useRef` hook doesn't handle conditional rendering or dynamic ref changes.
 * This hook creates a proxy that ensures that `refElement` is updated whenever the ref is changed. */
export declare const useRefProxy: <T extends HTMLElement = any>(targetRef: React.MutableRefObject<T | null> | undefined) => {
    refProxy: OnRefChangeType<T>;
    refElement: T | null;
    setRefElement: React.Dispatch<React.SetStateAction<T | null>>;
};
/** Calculates the dimensions of the element based on the current box model.
 * @see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
 */
export declare const getDimensions: (entry: ResizeObserverEntry, box: ResizeObserverBoxOptions | undefined) => {
    width: number;
    height: number;
};