Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 | /**
* ResizeObserver box options type
* @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#box
*/
export type ResizeObserverBoxOptions =
| "content-box"
| "border-box"
| "device-pixel-content-box";
/**
* Extended ResizeObserverEntry with additional convenience properties
*/
export interface ResizeEntry {
/** Original ResizeObserverEntry */
readonly entry: ResizeObserverEntry;
/** Target element being observed */
readonly target: Element;
/** Content rect (DOMRectReadOnly) */
readonly contentRect: DOMRectReadOnly;
/** Border box size array */
readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
/** Content box size array */
readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
/** Device pixel content box size array (if supported) */
readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
}
/**
* Callback invoked when element size changes
*/
export type OnResizeCallback = (entry: ResizeEntry) => void;
/**
* Callback invoked when an error occurs
*/
export type OnErrorCallback = (error: Error) => void;
/**
* Options for useResizeObserver hook
*
* @example
* ```tsx
* const { ref, width, height } = useResizeObserver({
* box: 'border-box',
* debounce: 100,
* onResize: (entry) => console.log('Resized:', entry),
* });
* ```
*/
export interface UseResizeObserverOptions<T extends Element = Element> {
/**
* Which box model to observe
* - 'content-box': Content area only (default)
* - 'border-box': Includes padding and border
* - 'device-pixel-content-box': Content area in device pixels (high-DPI)
* @default 'content-box'
*/
box?: ResizeObserverBoxOptions;
/**
* Debounce delay in milliseconds.
* Cannot be used together with throttle.
*/
debounce?: number;
/**
* Throttle interval in milliseconds.
* Cannot be used together with debounce.
*/
throttle?: number;
/**
* Function to round dimension values
* @default Math.round
*/
round?: (value: number) => number;
/**
* Callback invoked when element size changes
*/
onResize?: OnResizeCallback;
/**
* Callback invoked when an error occurs
*/
onError?: OnErrorCallback;
/**
* Whether to update React state on resize.
* Set to false for callback-only mode (better performance).
* @default true
*/
updateState?: boolean;
/**
* Whether observation is enabled
* @default true
*/
enabled?: boolean;
/**
* Initial width value (useful for SSR)
*/
initialWidth?: number;
/**
* Initial height value (useful for SSR)
*/
initialHeight?: number;
}
/**
* Return type for useResizeObserver hook
*
* @example
* ```tsx
* const {
* ref,
* width,
* height,
* isSupported,
* isObserving,
* } = useResizeObserver();
* ```
*/
export interface UseResizeObserverReturn<T extends Element = Element> {
/**
* Ref callback to attach to target element
*
* @example
* ```tsx
* <div ref={ref}>Content</div>
* ```
*/
ref: (element: T | null) => void;
/**
* Current element width in pixels.
* Undefined until first observation.
*/
width: number | undefined;
/**
* Current element height in pixels.
* Undefined until first observation.
*/
height: number | undefined;
/**
* Latest ResizeEntry with full observation data
*/
entry: ResizeEntry | undefined;
/**
* Content rect from the latest observation
*/
contentRect: DOMRectReadOnly | undefined;
/**
* First border box size from the latest observation
*/
borderBoxSize: ResizeObserverSize | undefined;
/**
* First content box size from the latest observation
*/
contentBoxSize: ResizeObserverSize | undefined;
/**
* First device pixel content box size from the latest observation
* (undefined if not supported by browser)
*/
devicePixelContentBoxSize: ResizeObserverSize | undefined;
/**
* Whether ResizeObserver API is supported
*/
isSupported: boolean;
/**
* Whether currently observing an element
*/
isObserving: boolean;
/**
* Manually start observing an element
*/
observe: (element: T) => void;
/**
* Manually stop observing an element
*/
unobserve: (element: T) => void;
/**
* Disconnect all observations
*/
disconnect: () => void;
}
|