1 | import type { MutableRefObject } from 'react';
|
2 | export type ReactResizeDetectorDimensions = {
|
3 | height?: number;
|
4 | width?: number;
|
5 | };
|
6 | export type ResfreshModeType = 'throttle' | 'debounce';
|
7 | export type ResfreshOptionsType = {
|
8 | leading?: boolean;
|
9 | trailing?: boolean;
|
10 | };
|
11 | export type OnResizeCallback = (width?: number, height?: number) => void;
|
12 | export 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 | };
|
57 | export type OnRefChangeType<T = any> = {
|
58 | (node: T | null): void;
|
59 | current?: T | null;
|
60 | };
|
61 | export interface UseResizeDetectorReturn<T> extends ReactResizeDetectorDimensions {
|
62 | ref: OnRefChangeType<T>;
|
63 | }
|
64 | export interface useResizeDetectorProps<T extends HTMLElement> extends Props {
|
65 | targetRef?: MutableRefObject<T | null>;
|
66 | }
|