import type { Ref } from "react"; import type { EnsuredRefs } from "../useEnsuredRef"; /** * @remarks \@since 2.3.0 */ export interface UseResizeObserverOptions { /** * An optional ref to merge with the returned ref handler function */ ref?: Ref; /** * Boolean if the `onResize` callback should not be triggered if only the * height has changed for the watched element. */ disableHeight?: boolean; /** * Boolean if the `onResize` callback should not be triggered if only the * width has changed for the watched element. */ disableWidth?: boolean; } /** * @remarks \@since 2.3.0 */ export interface ResizeObserverElementSize { /** * The height for the element that was changed. */ height: number; /** * The width for the element that was changed. */ width: number; /** * The scroll height for the element that was changed. */ scrollHeight: number; /** * The scroll height for the element that was changed. */ scrollWidth: number; } /** * @remarks \@since 2.3.0 */ export interface ResizeObserverElementData extends ResizeObserverElementSize { /** * The element that changed due to the resize observer. */ element: E; } /** * The callback that is triggered each time an element's size change has been * observed. * @remarks \@since 2.3.0 */ export declare type OnResizeObserverChange = (resizeData: ResizeObserverElementData) => void; /** * The new resize observer API that returns a `refHandler` to attach to a DOM * node instead of using the weird `target` API. * * @remarks \@since 2.3.0 * @param onResize - The resize handler to call when the element has changed * height or width. If you notice performance issues or other oddities, it is * recommended to wrap this function in `useCallback`. * @param options - Any additional options to use for the resize observer. */ export declare function useResizeObserver(onResize: OnResizeObserverChange, options?: UseResizeObserverOptions): EnsuredRefs;