@visx/responsive - npm Package Compare versions

Comparing version 3.3.0 to 3.10.0

esm/components/ParentSize.js

 import _pt from "prop-types";
-var _excluded = ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"];
+var _excluded = ["className", "children", "debounceTime", "ignoreDimensions", "initialSize", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"],
+  _excluded2 = ["parentRef", "resize"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import debounce from 'lodash/debounce';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-var defaultIgnoreDimensions = [];
+import React from 'react';
+import useParentSize from '../hooks/useParentSize';
 var defaultParentSizeStyles = {
@@ -15,6 +15,5 @@ width: '100%',
     children = _ref.children,
-    _ref$debounceTime = _ref.debounceTime,
-    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
-    _ref$ignoreDimensions = _ref.ignoreDimensions,
-    ignoreDimensions = _ref$ignoreDimensions === void 0 ? defaultIgnoreDimensions : _ref$ignoreDimensions,
+    debounceTime = _ref.debounceTime,
+    ignoreDimensions = _ref.ignoreDimensions,
+    initialSize = _ref.initialSize,
     _ref$parentSizeStyles = _ref.parentSizeStyles,
@@ -26,62 +25,18 @@ parentSizeStyles = _ref$parentSizeStyles === void 0 ? defaultParentSizeStyles : _ref$parentSizeStyles,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var target = useRef(null);
-  var animationFrameID = useRef(0);
-  var _useState = useState({
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
+  var _useParentSize = useParentSize({
+      initialSize: initialSize,
+      debounceTime: debounceTime,
+      ignoreDimensions: ignoreDimensions,
+      enableDebounceLeadingCall: enableDebounceLeadingCall,
+      resizeObserverPolyfill: resizeObserverPolyfill
     }),
-    state = _useState[0],
-    setState = _useState[1];
-  var resize = useMemo(function () {
-    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
-    return debounce(function (incoming) {
-      setState(function (existing) {
-        var stateKeys = Object.keys(existing);
-        var keysWithChanges = stateKeys.filter(function (key) {
-          return existing[key] !== incoming[key];
-        });
-        var shouldBail = keysWithChanges.every(function (key) {
-          return normalized.includes(key);
-        });
-        return shouldBail ? existing : incoming;
-      });
-    }, debounceTime, {
-      leading: enableDebounceLeadingCall
-    });
-  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
-  useEffect(function () {
-    var LocalResizeObserver = resizeObserverPolyfill || window.ResizeObserver;
-    var observer = new LocalResizeObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var _entry$contentRect;
-        var _ref2 = (_entry$contentRect = entry == null ? void 0 : entry.contentRect) != null ? _entry$contentRect : {},
-          left = _ref2.left,
-          top = _ref2.top,
-          width = _ref2.width,
-          height = _ref2.height;
-        animationFrameID.current = window.requestAnimationFrame(function () {
-          resize({
-            width: width,
-            height: height,
-            top: top,
-            left: left
-          });
-        });
-      });
-    });
-    if (target.current) observer.observe(target.current);
-    return function () {
-      window.cancelAnimationFrame(animationFrameID.current);
-      observer.disconnect();
-      resize.cancel();
-    };
-  }, [resize, resizeObserverPolyfill]);
+    parentRef = _useParentSize.parentRef,
+    resize = _useParentSize.resize,
+    dimensions = _objectWithoutPropertiesLoose(_useParentSize, _excluded2);
   return /*#__PURE__*/React.createElement("div", _extends({
     style: parentSizeStyles,
-    ref: target,
+    ref: parentRef,
     className: className
-  }, restProps), children(_extends({}, state, {
-    ref: target.current,
+  }, restProps), children(_extends({}, dimensions, {
+    ref: parentRef.current,
     resize: resize
@@ -92,6 +47,3 @@ })));
   className: _pt.string,
-  debounceTime: _pt.number,
-  enableDebounceLeadingCall: _pt.bool,
-  ignoreDimensions: _pt.oneOfType([_pt.any, _pt.arrayOf(_pt.any)]),
   children: _pt.func.isRequired
 };

esm/enhancers/withParentSize.js

@@ -1,7 +0,6 @@
-import _pt from "prop-types";
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import debounce from 'lodash/debounce';
 import React from 'react';
-import debounce from 'lodash/debounce';
 var CONTAINER_STYLES = {
@@ -12,10 +11,13 @@ width: '100%',
 
-// @TODO remove when upgraded to TS 4 which has its own declaration
+/**
+ * @deprecated
+ * @TODO remove in the next major version - exported for backwards compatibility
+ */
 
 export default function withParentSize(BaseComponent, /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
 resizeObserverPolyfill) {
-  var _class;
-  return _class = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
     function WrappedComponent() {
+      var _ref, _BaseComponent$displa, _this$props$debounceT, _this$props$enableDeb;
       var _this;
@@ -26,2 +28,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.displayName = "withParentSize(" + ((_ref = (_BaseComponent$displa = BaseComponent.displayName) != null ? _BaseComponent$displa : BaseComponent.name) != null ? _ref : 'Component') + ")";
       _this.state = {
@@ -38,5 +41,5 @@ parentWidth: undefined,
       // eslint-disable-next-line unicorn/consistent-function-scoping
-      function (_ref) {
-        var width = _ref.width,
-          height = _ref.height;
+      function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
         _this.setState({
@@ -46,4 +49,4 @@ parentWidth: width,
         });
-      }, _this.props.debounceTime, {
-        leading: _this.props.enableDebounceLeadingCall
+      }, (_this$props$debounceT = _this.props.debounceTime) != null ? _this$props$debounceT : 300, {
+        leading: (_this$props$enableDeb = _this.props.enableDebounceLeadingCall) != null ? _this$props$enableDeb : true
       });
@@ -94,11 +97,3 @@ return _this;
     return WrappedComponent;
-  }(React.Component), _class.propTypes = {
-    parentWidth: _pt.number,
-    parentHeight: _pt.number,
-    initialWidth: _pt.number,
-    initialHeight: _pt.number
-  }, _class.defaultProps = {
-    debounceTime: 300,
-    enableDebounceLeadingCall: true
-  }, _class;
+  }(React.Component);
 }

esm/enhancers/withScreenSize.js

@@ -1,2 +0,1 @@
-import _pt from "prop-types";
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -8,6 +7,6 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 export default function withScreenSize(BaseComponent) {
-  var _class;
-  return _class = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
     function WrappedComponent() {
+      var _ref, _BaseComponent$displa, _ref2, _this$props$debounceT, _this$props$enableDeb;
       var _this;
@@ -18,2 +17,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.displayName = "withScreenSize(" + ((_ref = (_BaseComponent$displa = BaseComponent.displayName) != null ? _BaseComponent$displa : BaseComponent.name) != null ? _ref : 'Component') + ")";
       _this.state = {
@@ -33,4 +33,4 @@ screenWidth: undefined,
         });
-      }, _this.props.windowResizeDebounceTime, {
-        leading: _this.props.enableDebounceLeadingCall
+      }, (_ref2 = (_this$props$debounceT = _this.props.debounceTime) != null ? _this$props$debounceT : _this.props.windowResizeDebounceTime) != null ? _ref2 : 300, {
+        leading: (_this$props$enableDeb = _this.props.enableDebounceLeadingCall) != null ? _this$props$enableDeb : true
       });
@@ -58,9 +58,3 @@ return _this;
     return WrappedComponent;
-  }(React.Component), _class.propTypes = {
-    screenWidth: _pt.number,
-    screenHeight: _pt.number
-  }, _class.defaultProps = {
-    windowResizeDebounceTime: 300,
-    enableDebounceLeadingCall: true
-  }, _class;
+  }(React.Component);
 }

esm/index.js

@@ -0,4 +1,6 @@
+export { default as ParentSize } from './components/ParentSize';
 export { default as ScaleSVG } from './components/ScaleSVG';
-export { default as ParentSize } from './components/ParentSize';
-export { default as withParentSize } from './enhancers/withParentSize';
-export { default as withScreenSize } from './enhancers/withScreenSize';
+export { default as withParentSize, WithParentSizeProvidedProps } from './enhancers/withParentSize';
+export { default as withScreenSize, WithScreenSizeProvidedProps } from './enhancers/withScreenSize';
+export { default as useParentSize, UseParentSizeConfig } from './hooks/useParentSize';
+export { default as useScreenSize, UseScreenSizeConfig } from './hooks/useScreenSize';

lib/components/ParentSize.d.ts

 import React from 'react';
-import { ResizeObserverPolyfill } from '../types';
+import { ParentSizeState, UseParentSizeConfig } from '../hooks/useParentSize';
+export declare type ParentSizeProvidedProps = ParentSizeState & {
+    ref: HTMLDivElement | null;
+    resize: (state: ParentSizeState) => void;
+};
 export declare type ParentSizeProps = {
     /** Optional `className` to add to the parent `div` wrapper used for size measurement. */
     className?: string;
-    /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */
-    debounceTime?: number;
-    /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */
-    enableDebounceLeadingCall?: boolean;
-    /** Optional dimensions provided won't trigger a state change when changed. */
-    ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];
-    /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */
+    /**
+     * @deprecated - use `style` prop as all other props are passed directly to the parent `div`.
+     * @TODO remove in the next major version.
+     * Optional `style` object to apply to the parent `div` wrapper used for size measurement.
+     * */
     parentSizeStyles?: React.CSSProperties;
-    /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
-    resizeObserverPolyfill?: ResizeObserverPolyfill;
     /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
-    children: (args: {
-        ref: HTMLDivElement | null;
-        resize: (state: ParentSizeState) => void;
-    } & ParentSizeState) => React.ReactNode;
-};
-declare type ParentSizeState = {
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-};
-export declare type ParentSizeProvidedProps = ParentSizeState;
-export default function ParentSize({ className, children, debounceTime, ignoreDimensions, parentSizeStyles, enableDebounceLeadingCall, resizeObserverPolyfill, ...restProps }: ParentSizeProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps>): JSX.Element;
-export {};
+    children: (args: ParentSizeProvidedProps) => React.ReactNode;
+} & UseParentSizeConfig;
+export default function ParentSize({ className, children, debounceTime, ignoreDimensions, initialSize, parentSizeStyles, enableDebounceLeadingCall, resizeObserverPolyfill, ...restProps }: ParentSizeProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof ParentSizeProps>): JSX.Element;
 //# sourceMappingURL=ParentSize.d.ts.map

lib/components/ParentSize.js

@@ -6,11 +6,9 @@ "use strict";
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _react = _interopRequireWildcard(require("react"));
-var _excluded = ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _react = _interopRequireDefault(require("react"));
+var _useParentSize2 = _interopRequireDefault(require("../hooks/useParentSize"));
+var _excluded = ["className", "children", "debounceTime", "ignoreDimensions", "initialSize", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"],
+  _excluded2 = ["parentRef", "resize"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var defaultIgnoreDimensions = [];
 var defaultParentSizeStyles = {
@@ -23,6 +21,5 @@ width: '100%',
     children = _ref.children,
-    _ref$debounceTime = _ref.debounceTime,
-    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
-    _ref$ignoreDimensions = _ref.ignoreDimensions,
-    ignoreDimensions = _ref$ignoreDimensions === void 0 ? defaultIgnoreDimensions : _ref$ignoreDimensions,
+    debounceTime = _ref.debounceTime,
+    ignoreDimensions = _ref.ignoreDimensions,
+    initialSize = _ref.initialSize,
     _ref$parentSizeStyles = _ref.parentSizeStyles,
@@ -34,62 +31,18 @@ parentSizeStyles = _ref$parentSizeStyles === void 0 ? defaultParentSizeStyles : _ref$parentSizeStyles,
     restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var target = (0, _react.useRef)(null);
-  var animationFrameID = (0, _react.useRef)(0);
-  var _useState = (0, _react.useState)({
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
+  var _useParentSize = (0, _useParentSize2.default)({
+      initialSize: initialSize,
+      debounceTime: debounceTime,
+      ignoreDimensions: ignoreDimensions,
+      enableDebounceLeadingCall: enableDebounceLeadingCall,
+      resizeObserverPolyfill: resizeObserverPolyfill
     }),
-    state = _useState[0],
-    setState = _useState[1];
-  var resize = (0, _react.useMemo)(function () {
-    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
-    return (0, _debounce.default)(function (incoming) {
-      setState(function (existing) {
-        var stateKeys = Object.keys(existing);
-        var keysWithChanges = stateKeys.filter(function (key) {
-          return existing[key] !== incoming[key];
-        });
-        var shouldBail = keysWithChanges.every(function (key) {
-          return normalized.includes(key);
-        });
-        return shouldBail ? existing : incoming;
-      });
-    }, debounceTime, {
-      leading: enableDebounceLeadingCall
-    });
-  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
-  (0, _react.useEffect)(function () {
-    var LocalResizeObserver = resizeObserverPolyfill || window.ResizeObserver;
-    var observer = new LocalResizeObserver(function (entries) {
-      entries.forEach(function (entry) {
-        var _entry$contentRect;
-        var _ref2 = (_entry$contentRect = entry == null ? void 0 : entry.contentRect) != null ? _entry$contentRect : {},
-          left = _ref2.left,
-          top = _ref2.top,
-          width = _ref2.width,
-          height = _ref2.height;
-        animationFrameID.current = window.requestAnimationFrame(function () {
-          resize({
-            width: width,
-            height: height,
-            top: top,
-            left: left
-          });
-        });
-      });
-    });
-    if (target.current) observer.observe(target.current);
-    return function () {
-      window.cancelAnimationFrame(animationFrameID.current);
-      observer.disconnect();
-      resize.cancel();
-    };
-  }, [resize, resizeObserverPolyfill]);
+    parentRef = _useParentSize.parentRef,
+    resize = _useParentSize.resize,
+    dimensions = _objectWithoutPropertiesLoose(_useParentSize, _excluded2);
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     style: parentSizeStyles,
-    ref: target,
+    ref: parentRef,
     className: className
-  }, restProps), children(_extends({}, state, {
-    ref: target.current,
+  }, restProps), children(_extends({}, dimensions, {
+    ref: parentRef.current,
     resize: resize
@@ -100,6 +53,3 @@ })));
   className: _propTypes.default.string,
-  debounceTime: _propTypes.default.number,
-  enableDebounceLeadingCall: _propTypes.default.bool,
-  ignoreDimensions: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.arrayOf(_propTypes.default.any)]),
   children: _propTypes.default.func.isRequired
 };

lib/enhancers/withParentSize.d.ts

@@ -1,97 +0,22 @@
-/// <reference types="lodash" />
 import React from 'react';
-import { ResizeObserver, ResizeObserverPolyfill } from '../types';
-export declare type WithParentSizeProps = {
-    debounceTime?: number;
-    enableDebounceLeadingCall?: boolean;
-};
+import { DebounceSettings, Simplify, ResizeObserverPolyfill } from '../types';
+/**
+ * @deprecated
+ * @TODO remove in the next major version - exported for backwards compatibility
+ */
+export declare type WithParentSizeProps = DebounceSettings;
+declare type WithParentSizeConfig = {
+    initialWidth?: number;
+    initialHeight?: number;
+} & DebounceSettings;
 declare type WithParentSizeState = {
     parentWidth?: number;
     parentHeight?: number;
-    initialWidth?: number;
-    initialHeight?: number;
 };
 export declare type WithParentSizeProvidedProps = WithParentSizeState;
-export default function withParentSize<BaseComponentProps extends WithParentSizeProps = {}>(BaseComponent: React.ComponentType<BaseComponentProps & WithParentSizeProvidedProps>, 
+declare type WithParentSizeComponentProps<P extends WithParentSizeProvidedProps> = Simplify<Omit<P, keyof WithParentSizeProvidedProps> & WithParentSizeConfig>;
+export default function withParentSize<P extends WithParentSizeProvidedProps>(BaseComponent: React.ComponentType<P>, 
 /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
-resizeObserverPolyfill?: ResizeObserverPolyfill): {
-    new (props: Readonly<BaseComponentProps & WithParentSizeState>): {
-        state: {
-            parentWidth: undefined;
-            parentHeight: undefined;
-        };
-        animationFrameID: number;
-        resizeObserver: ResizeObserver | undefined;
-        container: HTMLDivElement | null;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        setRef: (ref: HTMLDivElement) => void;
-        resize: import("lodash").DebouncedFunc<({ width, height }: {
-            width: number;
-            height: number;
-        }) => void>;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends "parentWidth" | "parentHeight" | "initialWidth" | "initialHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps & WithParentSizeState> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps & WithParentSizeState>, prevState: Readonly<WithParentSizeState>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps & WithParentSizeState>, prevState: Readonly<WithParentSizeState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): void;
-    };
-    new (props: BaseComponentProps & WithParentSizeState, context?: any): {
-        state: {
-            parentWidth: undefined;
-            parentHeight: undefined;
-        };
-        animationFrameID: number;
-        resizeObserver: ResizeObserver | undefined;
-        container: HTMLDivElement | null;
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        setRef: (ref: HTMLDivElement) => void;
-        resize: import("lodash").DebouncedFunc<({ width, height }: {
-            width: number;
-            height: number;
-        }) => void>;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends "parentWidth" | "parentHeight" | "initialWidth" | "initialHeight">(state: WithParentSizeState | ((prevState: Readonly<WithParentSizeState>, props: Readonly<BaseComponentProps & WithParentSizeState>) => WithParentSizeState | Pick<WithParentSizeState, K> | null) | Pick<WithParentSizeState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps & WithParentSizeState> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps & WithParentSizeState>, prevState: Readonly<WithParentSizeState>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps & WithParentSizeState>, prevState: Readonly<WithParentSizeState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithParentSizeState>, nextState: Readonly<WithParentSizeState>, nextContext: any): void;
-    };
-    defaultProps: {
-        debounceTime: number;
-        enableDebounceLeadingCall: boolean;
-    };
-    contextType?: React.Context<any> | undefined;
-};
+resizeObserverPolyfill?: ResizeObserverPolyfill): React.ComponentType<WithParentSizeComponentProps<P>>;
 export {};
 //# sourceMappingURL=withParentSize.d.ts.map

lib/enhancers/withParentSize.js

@@ -5,5 +5,4 @@ "use strict";
 exports.default = withParentSize;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireDefault(require("react"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,10 +17,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-// @TODO remove when upgraded to TS 4 which has its own declaration
+/**
+ * @deprecated
+ * @TODO remove in the next major version - exported for backwards compatibility
+ */
 
 function withParentSize(BaseComponent, /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
 resizeObserverPolyfill) {
-  var _class;
-  return _class = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
     function WrappedComponent() {
+      var _ref, _BaseComponent$displa, _this$props$debounceT, _this$props$enableDeb;
       var _this;
@@ -32,2 +34,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.displayName = "withParentSize(" + ((_ref = (_BaseComponent$displa = BaseComponent.displayName) != null ? _BaseComponent$displa : BaseComponent.name) != null ? _ref : 'Component') + ")";
       _this.state = {
@@ -44,5 +47,5 @@ parentWidth: undefined,
       // eslint-disable-next-line unicorn/consistent-function-scoping
-      function (_ref) {
-        var width = _ref.width,
-          height = _ref.height;
+      function (_ref2) {
+        var width = _ref2.width,
+          height = _ref2.height;
         _this.setState({
@@ -52,4 +55,4 @@ parentWidth: width,
         });
-      }, _this.props.debounceTime, {
-        leading: _this.props.enableDebounceLeadingCall
+      }, (_this$props$debounceT = _this.props.debounceTime) != null ? _this$props$debounceT : 300, {
+        leading: (_this$props$enableDeb = _this.props.enableDebounceLeadingCall) != null ? _this$props$enableDeb : true
       });
@@ -100,11 +103,3 @@ return _this;
     return WrappedComponent;
-  }(_react.default.Component), _class.propTypes = {
-    parentWidth: _propTypes.default.number,
-    parentHeight: _propTypes.default.number,
-    initialWidth: _propTypes.default.number,
-    initialHeight: _propTypes.default.number
-  }, _class.defaultProps = {
-    debounceTime: 300,
-    enableDebounceLeadingCall: true
-  }, _class;
+  }(_react.default.Component);
 }

lib/enhancers/withScreenSize.d.ts

@@ -1,7 +0,12 @@
-/// <reference types="lodash" />
 import React from 'react';
-export declare type WithScreenSizeProps = {
+import { Simplify, DebounceSettings } from '../types';
+declare type WithScreenSizeConfig = {
+    /** @deprecated use `debounceTime` instead */
     windowResizeDebounceTime?: number;
-    enableDebounceLeadingCall?: boolean;
-};
+} & DebounceSettings;
+/**
+ * @deprecated
+ * @TODO remove in the next major version - exported for backwards compatibility
+ */
+export declare type WithParentSizeProps = Omit<WithScreenSizeConfig, 'debounceTime'>;
 declare type WithScreenSizeState = {
@@ -12,68 +17,5 @@ screenWidth?: number;
 export declare type WithScreenSizeProvidedProps = WithScreenSizeState;
-export default function withScreenSize<BaseComponentProps extends WithScreenSizeProps = {}>(BaseComponent: React.ComponentType<BaseComponentProps>): {
-    new (props: Readonly<BaseComponentProps & WithScreenSizeState>): {
-        state: {
-            screenWidth: undefined;
-            screenHeight: undefined;
-        };
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        resize: import("lodash").DebouncedFunc<() => void>;
-        render(): JSX.Element | null;
-        context: any;
-        setState<K extends "screenWidth" | "screenHeight">(state: WithScreenSizeState | ((prevState: Readonly<WithScreenSizeState>, props: Readonly<BaseComponentProps & WithScreenSizeState>) => WithScreenSizeState | Pick<WithScreenSizeState, K> | null) | Pick<WithScreenSizeState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps & WithScreenSizeState> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps & WithScreenSizeState>, prevState: Readonly<WithScreenSizeState>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps & WithScreenSizeState>, prevState: Readonly<WithScreenSizeState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): void;
-    };
-    new (props: BaseComponentProps & WithScreenSizeState, context?: any): {
-        state: {
-            screenWidth: undefined;
-            screenHeight: undefined;
-        };
-        componentDidMount(): void;
-        componentWillUnmount(): void;
-        resize: import("lodash").DebouncedFunc<() => void>;
-        render(): JSX.Element | null;
-        context: any;
-        setState<K extends "screenWidth" | "screenHeight">(state: WithScreenSizeState | ((prevState: Readonly<WithScreenSizeState>, props: Readonly<BaseComponentProps & WithScreenSizeState>) => WithScreenSizeState | Pick<WithScreenSizeState, K> | null) | Pick<WithScreenSizeState, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<BaseComponentProps & WithScreenSizeState> & Readonly<{
-            children?: React.ReactNode;
-        }>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        shouldComponentUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): boolean;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<BaseComponentProps & WithScreenSizeState>, prevState: Readonly<WithScreenSizeState>): any;
-        componentDidUpdate?(prevProps: Readonly<BaseComponentProps & WithScreenSizeState>, prevState: Readonly<WithScreenSizeState>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<BaseComponentProps & WithScreenSizeState>, nextState: Readonly<WithScreenSizeState>, nextContext: any): void;
-    };
-    defaultProps: {
-        windowResizeDebounceTime: number;
-        enableDebounceLeadingCall: boolean;
-    };
-    contextType?: React.Context<any> | undefined;
-};
+declare type WithScreenSizeComponentProps<P extends WithScreenSizeProvidedProps> = Simplify<Omit<P, keyof WithScreenSizeProvidedProps> & WithScreenSizeConfig>;
+export default function withScreenSize<P extends WithScreenSizeProvidedProps>(BaseComponent: React.ComponentType<P>): React.ComponentType<WithScreenSizeComponentProps<P>>;
 export {};
 //# sourceMappingURL=withScreenSize.d.ts.map

lib/enhancers/withScreenSize.js

@@ -5,3 +5,2 @@ "use strict";
 exports.default = withScreenSize;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -14,6 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 function withScreenSize(BaseComponent) {
-  var _class;
-  return _class = /*#__PURE__*/function (_React$Component) {
+  return /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
     function WrappedComponent() {
+      var _ref, _BaseComponent$displa, _ref2, _this$props$debounceT, _this$props$enableDeb;
       var _this;
@@ -24,2 +23,3 @@ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+      _this.displayName = "withScreenSize(" + ((_ref = (_BaseComponent$displa = BaseComponent.displayName) != null ? _BaseComponent$displa : BaseComponent.name) != null ? _ref : 'Component') + ")";
       _this.state = {
@@ -39,4 +39,4 @@ screenWidth: undefined,
         });
-      }, _this.props.windowResizeDebounceTime, {
-        leading: _this.props.enableDebounceLeadingCall
+      }, (_ref2 = (_this$props$debounceT = _this.props.debounceTime) != null ? _this$props$debounceT : _this.props.windowResizeDebounceTime) != null ? _ref2 : 300, {
+        leading: (_this$props$enableDeb = _this.props.enableDebounceLeadingCall) != null ? _this$props$enableDeb : true
       });
@@ -64,9 +64,3 @@ return _this;
     return WrappedComponent;
-  }(_react.default.Component), _class.propTypes = {
-    screenWidth: _propTypes.default.number,
-    screenHeight: _propTypes.default.number
-  }, _class.defaultProps = {
-    windowResizeDebounceTime: 300,
-    enableDebounceLeadingCall: true
-  }, _class;
+  }(_react.default.Component);
 }

lib/index.d.ts

@@ -0,5 +1,7 @@
+export { default as ParentSize } from './components/ParentSize';
 export { default as ScaleSVG } from './components/ScaleSVG';
-export { default as ParentSize } from './components/ParentSize';
-export { default as withParentSize } from './enhancers/withParentSize';
-export { default as withScreenSize } from './enhancers/withScreenSize';
+export { default as withParentSize, WithParentSizeProvidedProps } from './enhancers/withParentSize';
+export { default as withScreenSize, WithScreenSizeProvidedProps } from './enhancers/withScreenSize';
+export { default as useParentSize, UseParentSizeConfig } from './hooks/useParentSize';
+export { default as useScreenSize, UseScreenSizeConfig } from './hooks/useScreenSize';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.withScreenSize = exports.withParentSize = exports.ScaleSVG = exports.ParentSize = void 0;
+exports.withScreenSize = exports.withParentSize = exports.useScreenSize = exports.useParentSize = exports.WithScreenSizeProvidedProps = exports.WithParentSizeProvidedProps = exports.UseScreenSizeConfig = exports.UseParentSizeConfig = exports.ScaleSVG = exports.ParentSize = void 0;
+var _ParentSize = _interopRequireDefault(require("./components/ParentSize"));
+exports.ParentSize = _ParentSize.default;
 var _ScaleSVG = _interopRequireDefault(require("./components/ScaleSVG"));
 exports.ScaleSVG = _ScaleSVG.default;
-var _ParentSize = _interopRequireDefault(require("./components/ParentSize"));
-exports.ParentSize = _ParentSize.default;
-var _withParentSize = _interopRequireDefault(require("./enhancers/withParentSize"));
+var _withParentSize = _interopRequireWildcard(require("./enhancers/withParentSize"));
 exports.withParentSize = _withParentSize.default;
-var _withScreenSize = _interopRequireDefault(require("./enhancers/withScreenSize"));
+exports.WithParentSizeProvidedProps = _withParentSize.WithParentSizeProvidedProps;
+var _withScreenSize = _interopRequireWildcard(require("./enhancers/withScreenSize"));
 exports.withScreenSize = _withScreenSize.default;
+exports.WithScreenSizeProvidedProps = _withScreenSize.WithScreenSizeProvidedProps;
+var _useParentSize = _interopRequireWildcard(require("./hooks/useParentSize"));
+exports.useParentSize = _useParentSize.default;
+exports.UseParentSizeConfig = _useParentSize.UseParentSizeConfig;
+var _useScreenSize = _interopRequireWildcard(require("./hooks/useScreenSize"));
+exports.useScreenSize = _useScreenSize.default;
+exports.UseScreenSizeConfig = _useScreenSize.UseScreenSizeConfig;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/types/index.d.ts

@@ -10,3 +10,3 @@ interface ResizeObserverEntry {
 declare type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
-declare class ResizeObserver {
+export declare class ResizeObserver {
     constructor(callback: ResizeObserverCallback);
@@ -18,6 +18,18 @@ observe(target: Element, options?: any): void;
 }
-interface ResizeObserverPolyfill {
+export interface ResizeObserverPolyfill {
     new (callback: ResizeObserverCallback): ResizeObserver;
 }
-export { ResizeObserver, ResizeObserverCallback, ResizeObserverPolyfill };
+export interface PrivateWindow {
+    ResizeObserver: ResizeObserverPolyfill;
+}
+export declare type Simplify<T> = {
+    [Key in keyof T]: T[Key];
+} & {};
+export interface DebounceSettings {
+    /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. Defaults to `300`. */
+    debounceTime?: number;
+    /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. Defaults to `true`. */
+    enableDebounceLeadingCall?: boolean;
+}
+export {};
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@visx/responsive",
-  "version": "3.3.0",
+  "version": "3.10.0",
   "description": "visx responsive svg",
@@ -45,3 +45,3 @@ "sideEffects": false,
   },
-  "gitHead": "cb0efd78bc5b818e318a0872162e75d3601c9dc8"
+  "gitHead": "94c9624fdeb5b9253dd475c20709790fd4d938fa"
 }

Readme.md

@@ -7,67 +7,157 @@ # @visx/responsive
 
-The `@visx/responsive` package is here to help you make responsive graphs.
+The `@visx/responsive` package is here to help you make responsive graphs by providing a collection
+of hooks, enhancers and components.
 
-**Enhancers**
+## Installation
 
-`withScreenSize`
+```
+npm install --save @visx/responsive
+```
 
-`withParentSize`
+## Hooks
 
-**Components**
+### `useScreenSize`
 
-`ParentSize`
+If you would like your graph to adapt to the screen size, you can use the `useScreenSize()` hook. It
+returns current screen width and height and updates the value automatically on browser window
+resize. You can optionally pass a config object as an argument to the hook. Config object attributes
+are:
 
-`ScaleSVG`
+- `initialSize` - initial size before measuring the screen, defaults to `{ width: 0, height: 0 }`.
+- `debounceTime` - determines how often the size is updated in milliseconds, defaults to `300`.
+- `enableDebounceLeadingCall` - determines whether the size is updated immediately on first render,
+  defaults to `true`. This is essentially the value of
+  [`options.leading` in Lodash's `debounce`](https://lodash.com/docs/4.17.15#debounce).
 
+#### Example
+
+```tsx
+import { useScreenSize } from '@visx/responsive';
+
+const ChartToRender = () => {
+  const { width, height } = useScreenSize({ debounceTime: 150 });
+
+  return (
+    <svg width={width} height={height}>
+      {/* content */}
+    </svg>
+  );
+};
+
+const chartToRender = <ChartToRender myProp="string" />;
+```
+
+### `useParentSize`
+
+If you want your graph to adapt to its parent size, you can use `useParentSize()` hook.
+`<ParentSize>` uses this hook internally. The hook returns `width`, `height`, `left`, `top`
+properties which describe dimensions of the container which received `parentRef` ref. You can
+optionally pass a config object as an argument to the hook. Config object attributes are:
+
+- `initialSize` - initial size before measuring the parent, defaults to
+  `{ width: 0, height: 0, left: 0, top: 0 }`.
+- `debounceTime` - determines how often the size is updated in miliseconds, defaults to `300`.
+- `enableDebounceLeadingCall` - determines whether the size is updated immediately on first render,
+  defaults to `true`. This is essentially the value of
+  [`options.leading` in Lodash's `debounce`](https://lodash.com/docs/4.17.15#debounce).
+- `ignoreDimensions` - array of dimensions for which an update should be skipped. For example, if
+  you pass `['width']`, width changes of the component that received `parentRef` won't be
+  propagated. Defaults to `[]` (all dimensions changes trigger updates).
+
+#### Example
+
+```tsx
+import { useParentSize } from '@visx/responsive';
+
+const ChartToRender = () => {
+  const { parentRef, width, height } = useParentSize({ debounceTime: 150 });
+
+  return (
+    <div ref={parentRef}>
+      <svg width={width} height={height}>
+        {/* content */}
+      </svg>
+    </div>
+  );
+};
+
+const chartToRender = <ChartToRender myProp="string" />;
+```
+
+## Enhancers / (HOCs)
+
 ### `withScreenSize`
 
-If you would like your graph to adapt to the screen size, you can use `withScreenSize()`. The
-resulting component will pass `screenWidth` and `screenHeight` props to the wrapped component
-containing the respective screen dimensions.
+If you prefer to use an enhancer, you can use the `withScreenSize()`. The resulting component will
+pass `screenWidth` and `screenHeight` props to the wrapped component containing the respective
+screen dimensions. You can also optionally pass config props to the wrapped component:
 
-### Example:
+- `debounceTime` - determines how often the size is updated in milliseconds, defaults to `300`.
+- `windowResizeDebounceTime` - deprecated, equivalent to the above, kept for backwards compatibility
+- `enableDebounceLeadingCall` - determines whether the size is updated immediately on first render,
+  defaults to `true`. This is essentially the value of
+  [`options.leading` in Lodash's `debounce`](https://lodash.com/docs/4.17.15#debounce).
 
-```js
-import { withScreenSize } from '@visx/responsive';
-// or
-// import * as Responsive from '@visx/responsive';
-// Responsive.withScreenSize(...);
+#### Example
 
-let chartToRender = withScreenSize(MySuperCoolVisxChart);
+```tsx
+import { withScreenSize, WithScreenSizeProvidedProps } from '@visx/responsive';
 
-// ... Render the chartToRender somewhere
+interface Props extends WithScreenSizeProvidedProps {
+  myProp: string;
+}
+
+const MySuperCoolVisxChart = ({ myProp, screenWidth, screenHeight }: Props) => {
+  // ...
+};
+
+const ChartToRender = withScreenSize(MySuperCoolVisxChart);
+
+const chartToRender = <ChartToRender myProp="string" />;
 ```
 
-## `withParentSize`
+### `withParentSize`
 
-If you would like your graph to adapt to it's parent component's size, you can use
+If you prefer to use an enhancer to adapt your graph to its parent component's size, you can use
 `withParentSize()`. The resulting component will pass `parentWidth` and `parentHeight` props to the
-wrapped component containing the respective parent's dimensions.
+wrapped component containing the respective parent's dimensions. You can also optionally pass config
+props to the wrapped component:
 
-### Example:
+- `initialWidth` - initial chart width used before the parent size is determined.
+- `initialHeight` - initial chart height used before the parent size is determined.
+- `debounceTime` - determines how often the size is updated in miliseconds, defaults to `300`.
+- `enableDebounceLeadingCall` - determines whether the size is updated immediately on first render,
+  defaults to `true`. This is essentially the value of
+  [`options.leading` in Lodash's `debounce`](https://lodash.com/docs/4.17.15#debounce).
 
-```js
-import { withParentSize } from '@visx/responsive';
-// or
-// import * as Responsive from '@visx/responsive';
-// Responsive.withParentSize(...);
+#### Example
 
-let chartToRender = withParentSize(MySuperCoolVisxChart);
+```tsx
+import { withParentSize, WithParentSizeProvidedProps } from '@visx/responsive';
 
-// ... Render the chartToRender somewhere
+interface Props extends WithParentSizeProvidedProps {
+  myProp: string;
+}
+
+const MySuperCoolVisxChart = ({ myProp, parentWidth, parentHeight }: Props) => {
+  // ...
+};
+
+const ChartWithParentSize = withParentSize(MySuperCoolVisxChart);
+
+const chartToRender = <ChartWithParentSize myProp="string" initialWidth={400} />;
 ```
 
-## `ParentSize`
+## Components
 
-You might do the same thing using the `ParentSize` component.
+### `ParentSize`
 
-### Example:
+You might do the same thing as `useParentSize` or `withParentSize` using the `ParentSize` component.
 
-```js
+#### Example
+
+```tsx
 import { ParentSize } from '@visx/responsive';
-// or
-// import * as Responsive from '@visx/responsive';
-// <Responsive.ParentSize />;
 
-let chartToRender = (
+const chartToRender = (
   <ParentSize>
@@ -88,19 +178,14 @@ {(parent) => (
 );
-
-// ... Render the chartToRender somewhere
 ```
 
-## `ScaleSVG`
+### `ScaleSVG`
 
 You can also create a responsive chart with a specific viewBox with the `ScaleSVG` component.
 
-### Example:
+#### Example
 
-```js
+```tsx
 import { ScaleSVG } from '@visx/responsive';
-// or
-// import * as Responsive from '@visx/responsive';
-// <Responsive.ScaleSVG />
 
-let chartToRender = (
+const chartToRender = (
   <ScaleSVG width={400} height={400}>
@@ -110,11 +195,8 @@ <MySuperCoolVXChart />
 );
-
-// ... Render the chartToRender somewhere
 ```
 
-### ⚠️ `ResizeObserver` dependency
+## ⚠️ `ResizeObserver` dependency
 
-The `ParentSize` component and `withParentSize` enhancer rely on `ResizeObserver`s for auto-sizing.
-If you need a polyfill, you can either polute the `window` object or inject it cleanly through
-props:
+`useParentSize`, `ParentSize` and `withParentSize` rely on `ResizeObserver`s for auto-sizing. If you
+need a polyfill, you can either pollute the `window` object or inject it cleanly like this:
 
@@ -124,14 +206,12 @@ ```tsx
 
-function App() {
-  return (
-    <ParentSize resizeObserverPolyfill={ResizeObserver} {...}>
-      {() => {...}}
-    </ParentSize>
-  );
-```
+// hook
+useParentSize({ resizeObserverPolyfill: ResizeObserver });
 
-## Installation
+// component
+<ParentSize resizeObserverPolyfill={ResizeObserver} {...}>
+  {() => {...}}
+</ParentSize>
 
+// enhancer
+withParentSize(MyComponent, ResizeObserver);
 ```
-npm install --save @visx/responsive
-```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59165

increased by10.89%

Number of package files

35

increased by29.63%

Lines of code

893

increased by3.48%

Number of lines in readme file

214

increased by59.7%

No dependency changes