UNPKG

2.03 kBTypeScriptView Raw
1import type { MutableRefObject } from 'react';
2export type ReactResizeDetectorDimensions = {
3 height?: number;
4 width?: number;
5};
6export type ResfreshModeType = 'throttle' | 'debounce';
7export type ResfreshOptionsType = {
8 leading?: boolean;
9 trailing?: boolean;
10};
11export type OnResizeCallback = (width?: number, height?: number) => void;
12export type Props = {
13 /**
14 * Function that will be invoked with observable element's width and height.
15 * Default: undefined
16 */
17 onResize?: OnResizeCallback;
18 /**
19 * Trigger update on height change.
20 * Default: true
21 */
22 handleHeight?: boolean;
23 /**
24 * Trigger onResize on width change.
25 * Default: true
26 */
27 handleWidth?: boolean;
28 /**
29 * Do not trigger update when a component mounts.
30 * Default: false
31 */
32 skipOnMount?: boolean;
33 /**
34 * Changes the update strategy. Possible values: "throttle" and "debounce".
35 * See `lodash` docs for more information https://lodash.com/docs/
36 * undefined - callback will be fired for every frame.
37 * Default: undefined
38 */
39 refreshMode?: ResfreshModeType;
40 /**
41 * Set the timeout/interval for `refreshMode` strategy
42 * Default: undefined
43 */
44 refreshRate?: number;
45 /**
46 * Pass additional params to `refreshMode` according to lodash docs
47 * Default: undefined
48 */
49 refreshOptions?: ResfreshOptionsType;
50 /**
51 * These options will be used as a second parameter of `resizeObserver.observe` method
52 * @see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe
53 * Default: undefined
54 */
55 observerOptions?: ResizeObserverOptions;
56};
57export type OnRefChangeType<T = any> = {
58 (node: T | null): void;
59 current?: T | null;
60};
61export interface UseResizeDetectorReturn<T> extends ReactResizeDetectorDimensions {
62 ref: OnRefChangeType<T>;
63}
64export interface useResizeDetectorProps<T extends HTMLElement> extends Props {
65 targetRef?: MutableRefObject<T | null>;
66}