update react-resize-detector

types/react-resize-detector/index.d.ts

@@ -14,20 +14,61 @@ interface ReactResizeDetectorDimensions {
 }
 
 interface ReactResizeDetectorProps extends React.Props<ReactResizeDetector> {
-    /** Trigger onResize on height change. Default: false */
+    /**
+     * Function that will be invoked with width and height arguments.
+     * Default: undefined
+     */
+    onResize?: (width: number, height: number) => void;
+    /**
+     * Trigger onResize on height change.
+     * Default: false
+     */
     handleHeight?: boolean;
-    /** Trigger onResize on width change. Default: false */
+    /**
+     * Trigger onResize on width change.
+     * Default: false
+     */
     handleWidth?: boolean;
-    /** Function that will be invoked with width and height arguments */
-    onResize?: (props: ReactResizeDetectorDimensions) => void;
-    /** Id of the element we want to observe. If none provided, parentElement of the component will be used. Default: "" */
-    querySelector?: string;
-    /** Possible values: throttle and debounce */
-    refreshMode?: "throttle" | "debounce";
-    /** Makes sense only when refreshMode is set. Default: 1000. */
-    refreshRate?: number;
-    /** Do not trigger onResize when a component mounts. Default: false */
+    /**
+     * Do not trigger onResize when a component mounts.
+     * Default: false
+     */
     skipOnMount?: boolean;
+    /**
+     * Possible values: "throttle" and "debounce".
+     * See lodash docs for more information.
+     * undefined - callback will be fired for every frame.
+     * Default: undefined
+     */
+    refreshMode?: "throttle" | "debounce";
+    /**
+     * Use this in conjunction with refreshMode.
+     * Important! It's a numeric prop so set it accordingly, e.g. refreshRate={500}.
+     * efault: 1000.
+     */
+    refreshRate?: number;
+    /**
+     * Use this in conjunction with refreshMode. An object in shape of { leading: bool, trailing: bool }.
+     * Please refer to lodash's docs for more info.
+     * Default: undefined
+     */
+    refreshOptions?: { leading?: boolean; trailing?: boolean };
+    /**
+     * A selector of an element to observe.
+     * You can use this property to attach resize-observer to any DOM element.
+     * Please refer to the querySelector docs.
+     * Default: undefined
+     */
+    querySelector?: string;
+    /**
+     * Valid only for a callback-pattern.
+     * Ignored for other render types.
+     * Set resize-detector's node type.
+     * You can pass any valid React node: string with node's name or element.
+     * Can be useful when you need to handle table's or paragraph's resizes.
+     * Default: "div"
+     */
+    nodeType?: keyof React.ReactHTML; // will be passed to React.createElement()
 
     render?: (props: ReactResizeDetectorDimensions) => React.ReactNode;
 }

types/react-resize-detector/react-resize-detector-tests.tsx

@@ -23,9 +23,11 @@ class App extends React.PureComponent {
                     handleWidth
                     handleHeight
                     skipOnMount
-                    querySelector="someElement"
                     refreshMode="throttle"
                     refreshRate={10}
+                    refreshOptions={{ leading: true, trailing: true }}
+                    querySelector="someElement"
+                    nodeType="span"
                 />
                 <ReactResizeDetector handleWidth handleHeight>
                     {({ width, height }: { width: number; height: number }) => (
@@ -49,13 +51,7 @@ class App extends React.PureComponent {
         );
     }
 
-    private readonly handleResize = ({
-        width,
-        height
-    }: {
-        width: number;
-        height: number;
-    }) => {
+    private readonly handleResize = (width: number, height: number) => {
         console.log(`width = ${width}`);
         console.log(`height = ${height}`);
     }