@vx/responsive - npm Package Compare versions

Comparing version 0.0.196 to 0.0.197

esm/components/ParentSize.js

@@ -17,5 +17,3 @@ import _pt from "prop-types";
 
-var ParentSize =
-/*#__PURE__*/
-function (_React$Component) {
+var ParentSize = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ParentSize, _React$Component);
@@ -109,3 +107,3 @@
 
-    return React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", _extends({
       style: parentSizeStyles,
@@ -112,0 +110,0 @@ ref: this.setTarget,

esm/components/ScaleSVG.js

 import _pt from "prop-types";
 import React from 'react';
-export default function ResponsiveSVG(_ref) {
+export default function ScaleSVG(_ref) {
   var children = _ref.children,
@@ -14,3 +14,3 @@ width = _ref.width,
       innerRef = _ref.innerRef;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -23,3 +23,3 @@ display: 'inline-block',
     }
-  }, React.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("svg", {
     preserveAspectRatio: preserveAspectRatio,
@@ -30,3 +30,3 @@ viewBox: xOrigin + " " + yOrigin + " " + width + " " + height,
 }
-ResponsiveSVG.propTypes = {
+ScaleSVG.propTypes = {
   children: _pt.node,
@@ -33,0 +33,0 @@ width: _pt.oneOfType([_pt.number, _pt.string]),

esm/enhancers/withParentSize.js

@@ -21,5 +21,3 @@ import _pt from "prop-types";
 
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_React$Component) {
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
@@ -95,6 +93,6 @@
           parentHeight = _this$state.parentHeight;
-      return React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         style: CONTAINER_STYLES,
         ref: this.setRef
-      }, parentWidth != null && parentHeight != null && React.createElement(BaseComponent, _extends({
+      }, parentWidth != null && parentHeight != null && /*#__PURE__*/React.createElement(BaseComponent, _extends({
         parentWidth: parentWidth,
@@ -101,0 +99,0 @@ parentHeight: parentHeight

esm/enhancers/withScreenSize.js

@@ -16,5 +16,3 @@ import _pt from "prop-types";
 
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_React$Component) {
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
@@ -66,3 +64,3 @@
       if (screenWidth == null || screenHeight == null) return null;
-      return React.createElement(BaseComponent, _extends({
+      return /*#__PURE__*/React.createElement(BaseComponent, _extends({
         screenWidth: screenWidth,
@@ -69,0 +67,0 @@ screenHeight: screenHeight

lib/components/ParentSize.d.ts

 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 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 `style` object to apply to the parent `div` wrapper used for size measurement. */
     parentSizeStyles?: React.CSSProperties;
+    /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
     children: (args: {
@@ -19,3 +23,3 @@ ref: HTMLDivElement | null;
 export declare type ParentSizeProvidedProps = ParentSizeState;
-export default class ParentSize extends React.Component<ParentSizeProps & JSX.IntrinsicElements['div'], ParentSizeState> {
+export default class ParentSize extends React.Component<ParentSizeProps & Omit<JSX.IntrinsicElements['div'], keyof ParentSizeProps>, ParentSizeState> {
     static defaultProps: {
@@ -22,0 +26,0 @@ debounceTime: number;

lib/components/ParentSize.js

@@ -26,5 +26,3 @@ "use strict";
 
-var ParentSize =
-/*#__PURE__*/
-function (_React$Component) {
+var ParentSize = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ParentSize, _React$Component);
@@ -118,3 +116,3 @@
 
-    return _react.default.createElement("div", _extends({
+    return /*#__PURE__*/_react.default.createElement("div", _extends({
       style: parentSizeStyles,
@@ -121,0 +119,0 @@ ref: this.setTarget,

lib/components/ScaleSVG.d.ts

 import React from 'react';
 export declare type ScaleSVGProps = {
+    /** Child SVG to scale, rendered as the child of the parent wrappers provided by this component `<div><svg>{children}</svg></div>`. */
     children?: React.ReactNode;
+    /** Width of the desired SVG. */
     width?: number | string;
+    /** Height of the desired SVG. */
     height?: number | string;
+    /** xOrigin of the desired SVG. */
     xOrigin?: number | string;
+    /** yOrigin of the desired SVG. */
     yOrigin?: number | string;
+    /** Whether to preserve SVG aspect ratio. */
     preserveAspectRatio?: string;
+    /** Ref to the parent `<svg />` used for scaling. */
     innerRef?: React.Ref<SVGSVGElement>;
 };
-export default function ResponsiveSVG({ children, width, height, xOrigin, yOrigin, preserveAspectRatio, innerRef, }: ScaleSVGProps): JSX.Element;
+export default function ScaleSVG({ children, width, height, xOrigin, yOrigin, preserveAspectRatio, innerRef, }: ScaleSVGProps): JSX.Element;
 //# sourceMappingURL=ScaleSVG.d.ts.map

lib/components/ScaleSVG.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = ResponsiveSVG;
+exports.default = ScaleSVG;
 
@@ -12,3 +12,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function ResponsiveSVG(_ref) {
+function ScaleSVG(_ref) {
   var children = _ref.children,
@@ -24,3 +24,3 @@ width = _ref.width,
       innerRef = _ref.innerRef;
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -33,3 +33,3 @@ display: 'inline-block',
     }
-  }, _react.default.createElement("svg", {
+  }, /*#__PURE__*/_react.default.createElement("svg", {
     preserveAspectRatio: preserveAspectRatio,
@@ -41,3 +41,3 @@ viewBox: xOrigin + " " + yOrigin + " " + width + " " + height,
 
-ResponsiveSVG.propTypes = {
+ScaleSVG.propTypes = {
   children: _propTypes.default.node,
@@ -44,0 +44,0 @@ width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

lib/enhancers/withParentSize.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 export default function withParentSize<BaseComponentProps extends WithParentSizeProps = {}>(BaseComponent: React.ComponentType<BaseComponentProps & WithParentSizeProvidedProps>): {
-    new (props: BaseComponentProps & WithParentSizeState): {
+    new (props: BaseComponentProps & WithParentSizeProvidedProps): {
         animationFrameID: number | null;
@@ -15,0 +15,0 @@ resizeObserver: ResizeObserver | undefined;

lib/enhancers/withParentSize.js

@@ -32,5 +32,3 @@ "use strict";
 
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_React$Component) {
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
@@ -106,6 +104,6 @@
           parentHeight = _this$state.parentHeight;
-      return _react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         style: CONTAINER_STYLES,
         ref: this.setRef
-      }, parentWidth != null && parentHeight != null && _react.default.createElement(BaseComponent, _extends({
+      }, parentWidth != null && parentHeight != null && /*#__PURE__*/_react.default.createElement(BaseComponent, _extends({
         parentWidth: parentWidth,
@@ -112,0 +110,0 @@ parentHeight: parentHeight

lib/enhancers/withScreenSize.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
 export default function withScreenSize<BaseComponentProps extends WithScreenSizeProps = {}>(BaseComponent: React.ComponentType<BaseComponentProps>): {
-    new (props: BaseComponentProps & WithScreenSizeState): {
+    new (props: BaseComponentProps & WithScreenSizeProvidedProps): {
         handleResize: () => void;
@@ -14,0 +14,0 @@ componentDidMount(): void;

lib/enhancers/withScreenSize.js

@@ -25,5 +25,3 @@ "use strict";
 
-  return _temp = _class =
-  /*#__PURE__*/
-  function (_React$Component) {
+  return _temp = _class = /*#__PURE__*/function (_React$Component) {
     _inheritsLoose(WrappedComponent, _React$Component);
@@ -75,3 +73,3 @@
       if (screenWidth == null || screenHeight == null) return null;
-      return _react.default.createElement(BaseComponent, _extends({
+      return /*#__PURE__*/_react.default.createElement(BaseComponent, _extends({
         screenWidth: screenWidth,
@@ -78,0 +76,0 @@ screenHeight: screenHeight

package.json

 {
   "name": "@vx/responsive",
-  "version": "0.0.196",
+  "version": "0.0.197",
   "description": "vx responsive svg",
@@ -13,5 +13,2 @@ "sideEffects": false,
   ],
-  "scripts": {
-    "docs": "cd ./docs && ../../../node_modules/.bin/react-docgen ../src/components | ../../../scripts/buildDocs.sh"
-  },
   "repository": {
@@ -47,3 +44,3 @@ "type": "git",
   },
-  "gitHead": "0b9ff48c735be9a9273f38750120e7fe2fb2caaf"
+  "gitHead": "c56b64bfbedde9ca06255b2eeff84b52c49d57ea"
 }

Readme.md

@@ -23,3 +23,5 @@ # @vx/responsive
 
-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 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.
 
@@ -41,3 +43,5 @@ ### Example:
 
-If you would like your graph to adapt to it's 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.
+If you would like your graph to adapt to it's 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.
 
@@ -110,3 +114,2 @@ ### Example:
 
-
 ## Installation
@@ -117,41 +120,1 @@
 ```
-
-
-## Components
-
-
-
-  - [ParentSize](#parentsize-)
-  - [ScaleSVG](#scalesvg-)
-
-## API
-
-
-
-<h3 id="parentsize-">&lt;ParentSize /&gt;</h3>
-
-
-
-<a id="#ParentSize__children" name="ParentSize__children" href="#ParentSize__children">#</a> *ParentSize*.**children**&lt;func&gt; `required` 
-
-<a id="#ParentSize__className" name="ParentSize__className" href="#ParentSize__className">#</a> *ParentSize*.**className**&lt;string&gt;  
-
-<a id="#ParentSize__debounceTime" name="ParentSize__debounceTime" href="#ParentSize__debounceTime">#</a> *ParentSize*.**debounceTime**&lt;number&gt;  <table><tr><td><strong>Default</strong></td><td>300</td></td></table>
-
-<h3 id="scalesvg-">&lt;ScaleSVG /&gt;</h3>
-
-
-
-<a id="#ScaleSVG__children" name="ScaleSVG__children" href="#ScaleSVG__children">#</a> *ScaleSVG*.**children**&lt;any&gt;  
-
-<a id="#ScaleSVG__height" name="ScaleSVG__height" href="#ScaleSVG__height">#</a> *ScaleSVG*.**height**&lt;union(number|string)&gt;  
-
-<a id="#ScaleSVG__innerRef" name="ScaleSVG__innerRef" href="#ScaleSVG__innerRef">#</a> *ScaleSVG*.**innerRef**&lt;union(func|object)&gt;  
-
-<a id="#ScaleSVG__preserveAspectRatio" name="ScaleSVG__preserveAspectRatio" href="#ScaleSVG__preserveAspectRatio">#</a> *ScaleSVG*.**preserveAspectRatio**&lt;string&gt;  <table><tr><td><strong>Default</strong></td><td>'xMinYMin meet'</td></td></table>
-
-<a id="#ScaleSVG__width" name="ScaleSVG__width" href="#ScaleSVG__width">#</a> *ScaleSVG*.**width**&lt;union(number|string)&gt;  
-
-<a id="#ScaleSVG__xOrigin" name="ScaleSVG__xOrigin" href="#ScaleSVG__xOrigin">#</a> *ScaleSVG*.**xOrigin**&lt;union(number|string)&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
-
-<a id="#ScaleSVG__yOrigin" name="ScaleSVG__yOrigin" href="#ScaleSVG__yOrigin">#</a> *ScaleSVG*.**yOrigin**&lt;union(number|string)&gt;  <table><tr><td><strong>Default</strong></td><td>0</td></td></table>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Worsened metrics

Total package byte prevSize

45123

decreased by-1.44%

Lines of code

768

decreased by-0.13%

Number of lines in readme file

117

decreased by-24.03%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes