diff --git a/types/react-resize-detector/index.d.ts b/types/react-resize-detector/index.d.ts index c2592364e3..f4cbadd600 100755 --- a/types/react-resize-detector/index.d.ts +++ b/types/react-resize-detector/index.d.ts @@ -14,20 +14,61 @@ interface ReactResizeDetectorDimensions { } interface ReactResizeDetectorProps extends React.Props { - /** 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; } diff --git a/types/react-resize-detector/react-resize-detector-tests.tsx b/types/react-resize-detector/react-resize-detector-tests.tsx index 027766c6eb..294b841b85 100755 --- a/types/react-resize-detector/react-resize-detector-tests.tsx +++ b/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" /> {({ 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}`); }