Update types for react-resize-detector

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

@@ -1,4 +1,4 @@
-// Type definitions for react-resize-detector 3.1
+// Type definitions for react-resize-detector 4.0
 // Project: https://github.com/maslianok/react-resize-detector
 // Definitions by: Matthew James <https://github.com/matthew-matvei>
 //                 James Greenleaf <https://github.com/aMoniker>
@@ -8,26 +8,33 @@
 
 import * as React from "react";
 
+interface ReactResizeDetectorDimensions {
+    height: number;
+    width: number;
+}
+
 interface ReactResizeDetectorProps extends React.Props<ReactResizeDetector> {
-    /** Function that will be invoked with width and height arguments */
-    onResize?: (width: number, height: number) => void;
     /** Trigger onResize on height change. Default: false */
     handleHeight?: boolean;
     /** Trigger onResize on width change. Default: false */
     handleWidth?: boolean;
-    /** Do not trigger onResize when a component mounts. Default: false */
-    skipOnMount?: 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: "" */
-    resizableElementId?: string;
+    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 */
+    skipOnMount?: boolean;
 
-    render?: (props: any) => React.ReactNode;
+    render?: (props: ReactResizeDetectorDimensions) => React.ReactNode;
 }
 
-declare class ReactResizeDetector extends React.PureComponent<ReactResizeDetectorProps> { }
+declare class ReactResizeDetector extends React.PureComponent<
+    ReactResizeDetectorProps
+> {}
 
 export function withResizeDetector(
     WrappedComponent: React.ReactNode,

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

@@ -1,7 +1,6 @@
 // Adapted from example provided at https://github.com/maslianok/react-resize-detector
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import ReactResizeDetector, { withResizeDetector } from "react-resize-detector";
 
 const CustomComponent = ({ width, height }: any) => (
@@ -24,12 +23,12 @@ class App extends React.PureComponent {
                     handleWidth
                     handleHeight
                     skipOnMount
-                    resizableElementId="someElement"
+                    querySelector="someElement"
                     refreshMode="throttle"
                     refreshRate={10}
                 />
                 <ReactResizeDetector handleWidth handleHeight>
-                    {(width: number, height: number) => (
+                    {({ width, height }: { width: number; height: number }) => (
                         <div>{`${width}x${height}`}</div>
                     )}
                 </ReactResizeDetector>
@@ -50,7 +49,13 @@ class App extends React.PureComponent {
         );
     }
 
-    private handleResize(width: number, height: number) {
+    private readonly handleResize = ({
+        width,
+        height
+    }: {
+        width: number;
+        height: number;
+    }) => {
         console.log(`width = ${width}`);
         console.log(`height = ${height}`);
     }