react-aspect-ratio - npm Package Compare versions

Comparing version 1.0.42 to 1.0.43

dist/__tests__/index.js

@@ -19,3 +19,3 @@ "use strict";
     it('should render wrapper for children', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -25,3 +25,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
         ratio: "4/3"
@@ -33,3 +33,3 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -39,3 +39,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
         ratio: 0.75
@@ -47,3 +47,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -53,3 +53,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
         ratio: "4/3",
@@ -66,3 +66,3 @@ style: {
     it('should render wrapper for children', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -72,3 +72,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: "4/3"
@@ -80,3 +80,3 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -86,3 +86,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: 0.75
@@ -94,3 +94,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = _react["default"].createElement("img", {
+      var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -100,3 +100,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: "4/3",
@@ -103,0 +103,0 @@ style: {

dist/es/__tests__/index.js

@@ -19,3 +19,3 @@ "use strict";
     it('should render wrapper for children', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -25,3 +25,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.default, {
         ratio: "4/3"
@@ -33,3 +33,3 @@ }, innerImage)).toJSON();
     it('should support number as props', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -39,3 +39,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.default, {
         ratio: 0.75
@@ -47,3 +47,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -53,3 +53,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.default, {
         ratio: "4/3",
@@ -66,3 +66,3 @@ style: {
     it('should render wrapper for children', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -72,3 +72,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
         ratio: "4/3"
@@ -80,3 +80,3 @@ }, innerImage)).toJSON();
     it('should support number as props', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -86,3 +86,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
         ratio: 0.75
@@ -94,3 +94,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', () => {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = /*#__PURE__*/_react.default.createElement("img", {
         src: "https://foo.bar",
@@ -100,3 +100,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
         ratio: "4/3",
@@ -103,0 +103,0 @@ style: {

dist/es/react-15.6.js

@@ -61,3 +61,5 @@ "use strict";
 
-    return (// $FlowFixMe
+    return (
+      /*#__PURE__*/
+      // $FlowFixMe
       _react.default.createElement("div", _extends({
@@ -64,0 +66,0 @@ ref: this.setNode,

dist/es/react-latest.js

@@ -30,3 +30,5 @@ "use strict";
 
-  return (// $FlowFixMe
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe
     _react.default.createElement("div", _extends({
@@ -33,0 +35,0 @@ style: newStyle

dist/es/stories/index.js

@@ -17,7 +17,7 @@ "use strict";
 // setAddon(JSXAddon);
-var PageTitle = () => _react.default.createElement("div", {
+var PageTitle = () => /*#__PURE__*/_react.default.createElement("div", {
   className: "page__title"
-}, _react.default.createElement("h1", {
+}, /*#__PURE__*/_react.default.createElement("h1", {
   className: "page__title-main"
-}, "React Apect Ratio", _react.default.createElement("a", {
+}, "React Apect Ratio", /*#__PURE__*/_react.default.createElement("a", {
   className: "github mui-icon",
@@ -28,7 +28,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
   title: "github"
-}, _react.default.createElement("span", {
+}, /*#__PURE__*/_react.default.createElement("span", {
   style: {
     visibility: 'hidden'
   }
-}, " Github "))), _react.default.createElement("p", {
+}, " Github "))), /*#__PURE__*/_react.default.createElement("p", {
   className: "page__title-desc"
@@ -44,9 +44,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
   } = _ref;
-  return _react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "card"
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "card__head"
-  }, _react.default.createElement("h3", {
+  }, /*#__PURE__*/_react.default.createElement("h3", {
     className: "card__title"
-  }, titleText)), _react.default.createElement("div", {
+  }, titleText)), /*#__PURE__*/_react.default.createElement("div", {
     className: "card__conent"
@@ -56,5 +56,5 @@ }, contentNode));
 
-(0, _react2.storiesOf)('AspectRatio', module).add('Image', () => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+(0, _react2.storiesOf)('AspectRatio', module).add('Image', () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PageTitle, null), /*#__PURE__*/_react.default.createElement(Card, {
   titleText: "Image with Aspect Ratio",
-  contentNode: _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_index.AspectRatio, {
+  contentNode: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
     ratio: "300/165",
@@ -65,9 +65,9 @@ style: {
     }
-  }, _react.default.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement("img", {
     src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
     alt: "demo"
-  })), _react.default.createElement("p", null, lorem))
-}))).add('Image with number', () => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  })), /*#__PURE__*/_react.default.createElement("p", null, lorem))
+}))).add('Image with number', () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PageTitle, null), /*#__PURE__*/_react.default.createElement(Card, {
   titleText: "Image with Aspect Ratio (pass number as props)",
-  contentNode: _react.default.createElement(_index.AspectRatio, {
+  contentNode: /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
     ratio: 0.75,
@@ -77,9 +77,9 @@ style: {
     }
-  }, _react.default.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement("img", {
     src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
     alt: "demo"
   }))
-}))).add('Background Image', () => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}))).add('Background Image', () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PageTitle, null), /*#__PURE__*/_react.default.createElement(Card, {
   titleText: "Background image with aspect ratio",
-  contentNode: _react.default.createElement(_index.AspectRatio, {
+  contentNode: /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
     ratio: "3/4",
@@ -106,12 +106,12 @@ style: {
   }];
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PageTitle, null), /*#__PURE__*/_react.default.createElement(Card, {
     titleText: "Image Gallery with Aspect Ratio",
-    contentNode: _react.default.createElement("div", {
+    contentNode: /*#__PURE__*/_react.default.createElement("div", {
       className: "gallery"
-    }, images.map(image => _react.default.createElement("div", {
+    }, images.map(image => /*#__PURE__*/_react.default.createElement("div", {
       className: "gallery__image",
       key: image.src
-    }, _react.default.createElement(_index.AspectRatio, {
+    }, /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
       ratio: image.ratio
-    }, _react.default.createElement("img", {
+    }, /*#__PURE__*/_react.default.createElement("img", {
       src: image.src,
@@ -121,5 +121,5 @@ alt: "demo"
   }));
-}).add('Iframe', () => _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}).add('Iframe', () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(PageTitle, null), /*#__PURE__*/_react.default.createElement(Card, {
   titleText: "Iframe with aspect ratio",
-  contentNode: _react.default.createElement(_index.AspectRatio, {
+  contentNode: /*#__PURE__*/_react.default.createElement(_index.AspectRatio, {
     ratio: "560/315",
@@ -129,3 +129,3 @@ style: {
     }
-  }, _react.default.createElement("iframe", {
+  }, /*#__PURE__*/_react.default.createElement("iframe", {
     src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -132,0 +132,0 @@ frameBorder: "0",

dist/next/__tests__/index.js

@@ -8,7 +8,7 @@ import React from 'react';
     it('should render wrapper for children', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(OldAspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(OldAspectRatio, {
         ratio: "4/3"
@@ -19,7 +19,7 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(OldAspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(OldAspectRatio, {
         ratio: 0.75
@@ -30,7 +30,7 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(OldAspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(OldAspectRatio, {
         ratio: "4/3",
@@ -46,7 +46,7 @@ style: {
     it('should render wrapper for children', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(AspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(AspectRatio, {
         ratio: "4/3"
@@ -57,7 +57,7 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(AspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(AspectRatio, {
         ratio: 0.75
@@ -68,7 +68,7 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = React.createElement("img", {
+      var innerImage = /*#__PURE__*/React.createElement("img", {
         src: "https://foo.bar",
         alt: "demo"
       });
-      var node = renderer.create(React.createElement(AspectRatio, {
+      var node = renderer.create( /*#__PURE__*/React.createElement(AspectRatio, {
         ratio: "4/3",
@@ -75,0 +75,0 @@ style: {

dist/next/react-15.6.js

@@ -62,3 +62,5 @@ function _extends() { _extends = Object.assign || 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); }
 
-    return (// $FlowFixMe
+    return (
+      /*#__PURE__*/
+      // $FlowFixMe
       React.createElement("div", _extends({
@@ -65,0 +67,0 @@ ref: this.setNode,

dist/next/react-latest.js

@@ -19,3 +19,5 @@ function _extends() { _extends = Object.assign || 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); }
 
-  return (// $FlowFixMe
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe
     React.createElement("div", _extends({
@@ -22,0 +24,0 @@ style: newStyle

dist/next/stories/index.js

@@ -9,7 +9,7 @@ import React from 'react';
 var PageTitle = function PageTitle() {
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "page__title"
-  }, React.createElement("h1", {
+  }, /*#__PURE__*/React.createElement("h1", {
     className: "page__title-main"
-  }, "React Apect Ratio", React.createElement("a", {
+  }, "React Apect Ratio", /*#__PURE__*/React.createElement("a", {
     className: "github mui-icon",
@@ -20,7 +20,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
     title: "github"
-  }, React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     style: {
       visibility: 'hidden'
     }
-  }, " Github "))), React.createElement("p", {
+  }, " Github "))), /*#__PURE__*/React.createElement("p", {
     className: "page__title-desc"
@@ -35,9 +35,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
       contentNode = _ref.contentNode;
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "card"
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "card__head"
-  }, React.createElement("h3", {
+  }, /*#__PURE__*/React.createElement("h3", {
     className: "card__title"
-  }, titleText)), React.createElement("div", {
+  }, titleText)), /*#__PURE__*/React.createElement("div", {
     className: "card__conent"
@@ -48,5 +48,5 @@ }, contentNode));
 storiesOf('AspectRatio', module).add('Image', function () {
-  return React.createElement(React.Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement(Card, {
     titleText: "Image with Aspect Ratio",
-    contentNode: React.createElement(React.Fragment, null, React.createElement(AspectRatio, {
+    contentNode: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AspectRatio, {
       ratio: "300/165",
@@ -57,11 +57,11 @@ style: {
       }
-    }, React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("img", {
       src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
       alt: "demo"
-    })), React.createElement("p", null, lorem))
+    })), /*#__PURE__*/React.createElement("p", null, lorem))
   }));
 }).add('Image with number', function () {
-  return React.createElement(React.Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement(Card, {
     titleText: "Image with Aspect Ratio (pass number as props)",
-    contentNode: React.createElement(AspectRatio, {
+    contentNode: /*#__PURE__*/React.createElement(AspectRatio, {
       ratio: 0.75,
@@ -71,3 +71,3 @@ style: {
       }
-    }, React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("img", {
       src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
@@ -78,5 +78,5 @@ alt: "demo"
 }).add('Background Image', function () {
-  return React.createElement(React.Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement(Card, {
     titleText: "Background image with aspect ratio",
-    contentNode: React.createElement(AspectRatio, {
+    contentNode: /*#__PURE__*/React.createElement(AspectRatio, {
       ratio: "3/4",
@@ -104,13 +104,13 @@ style: {
   }];
-  return React.createElement(React.Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement(Card, {
     titleText: "Image Gallery with Aspect Ratio",
-    contentNode: React.createElement("div", {
+    contentNode: /*#__PURE__*/React.createElement("div", {
       className: "gallery"
     }, images.map(function (image) {
-      return React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         className: "gallery__image",
         key: image.src
-      }, React.createElement(AspectRatio, {
+      }, /*#__PURE__*/React.createElement(AspectRatio, {
         ratio: image.ratio
-      }, React.createElement("img", {
+      }, /*#__PURE__*/React.createElement("img", {
         src: image.src,
@@ -122,5 +122,5 @@ alt: "demo"
 }).add('Iframe', function () {
-  return React.createElement(React.Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement(Card, {
     titleText: "Iframe with aspect ratio",
-    contentNode: React.createElement(AspectRatio, {
+    contentNode: /*#__PURE__*/React.createElement(AspectRatio, {
       ratio: "560/315",
@@ -130,3 +130,3 @@ style: {
       }
-    }, React.createElement("iframe", {
+    }, /*#__PURE__*/React.createElement("iframe", {
       src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -133,0 +133,0 @@ frameBorder: "0",

dist/react-15.6.js

@@ -72,3 +72,5 @@ "use strict";
 
-    return (// $FlowFixMe
+    return (
+      /*#__PURE__*/
+      // $FlowFixMe
       _react["default"].createElement("div", _extends({
@@ -75,0 +77,0 @@ ref: this.setNode,

dist/react-latest.js

@@ -27,3 +27,5 @@ "use strict";
 
-  return (// $FlowFixMe
+  return (
+    /*#__PURE__*/
+    // $FlowFixMe
     _react["default"].createElement("div", _extends({
@@ -30,0 +32,0 @@ style: newStyle

dist/stories/index.js

@@ -18,7 +18,7 @@ "use strict";
 var PageTitle = function PageTitle() {
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: "page__title"
-  }, _react["default"].createElement("h1", {
+  }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: "page__title-main"
-  }, "React Apect Ratio", _react["default"].createElement("a", {
+  }, "React Apect Ratio", /*#__PURE__*/_react["default"].createElement("a", {
     className: "github mui-icon",
@@ -29,7 +29,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
     title: "github"
-  }, _react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement("span", {
     style: {
       visibility: 'hidden'
     }
-  }, " Github "))), _react["default"].createElement("p", {
+  }, " Github "))), /*#__PURE__*/_react["default"].createElement("p", {
     className: "page__title-desc"
@@ -44,9 +44,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
       contentNode = _ref.contentNode;
-  return _react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: "card"
-  }, _react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "card__head"
-  }, _react["default"].createElement("h3", {
+  }, /*#__PURE__*/_react["default"].createElement("h3", {
     className: "card__title"
-  }, titleText)), _react["default"].createElement("div", {
+  }, titleText)), /*#__PURE__*/_react["default"].createElement("div", {
     className: "card__conent"
@@ -57,5 +57,5 @@ }, contentNode));
 (0, _react2.storiesOf)('AspectRatio', module).add('Image', function () {
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
     titleText: "Image with Aspect Ratio",
-    contentNode: _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_index.AspectRatio, {
+    contentNode: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
       ratio: "300/165",
@@ -66,11 +66,11 @@ style: {
       }
-    }, _react["default"].createElement("img", {
+    }, /*#__PURE__*/_react["default"].createElement("img", {
       src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
       alt: "demo"
-    })), _react["default"].createElement("p", null, lorem))
+    })), /*#__PURE__*/_react["default"].createElement("p", null, lorem))
   }));
 }).add('Image with number', function () {
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
     titleText: "Image with Aspect Ratio (pass number as props)",
-    contentNode: _react["default"].createElement(_index.AspectRatio, {
+    contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
       ratio: 0.75,
@@ -80,3 +80,3 @@ style: {
       }
-    }, _react["default"].createElement("img", {
+    }, /*#__PURE__*/_react["default"].createElement("img", {
       src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
@@ -87,5 +87,5 @@ alt: "demo"
 }).add('Background Image', function () {
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
     titleText: "Background image with aspect ratio",
-    contentNode: _react["default"].createElement(_index.AspectRatio, {
+    contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
       ratio: "3/4",
@@ -113,13 +113,13 @@ style: {
   }];
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
     titleText: "Image Gallery with Aspect Ratio",
-    contentNode: _react["default"].createElement("div", {
+    contentNode: /*#__PURE__*/_react["default"].createElement("div", {
       className: "gallery"
     }, images.map(function (image) {
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "gallery__image",
         key: image.src
-      }, _react["default"].createElement(_index.AspectRatio, {
+      }, /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: image.ratio
-      }, _react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement("img", {
         src: image.src,
@@ -131,5 +131,5 @@ alt: "demo"
 }).add('Iframe', function () {
-  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
     titleText: "Iframe with aspect ratio",
-    contentNode: _react["default"].createElement(_index.AspectRatio, {
+    contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
       ratio: "560/315",
@@ -139,3 +139,3 @@ style: {
       }
-    }, _react["default"].createElement("iframe", {
+    }, /*#__PURE__*/_react["default"].createElement("iframe", {
       src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -142,0 +142,0 @@ frameBorder: "0",

dist/umd/__tests__/index.js

@@ -30,3 +30,3 @@ (function (global, factory) {
       it('should render wrapper for children', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -36,3 +36,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
           ratio: "4/3"
@@ -44,3 +44,3 @@ }, innerImage)).toJSON();
       it('should support number as props', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -50,3 +50,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
           ratio: 0.75
@@ -58,3 +58,3 @@ }, innerImage)).toJSON();
       it('custom style willl be adpoted', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -64,3 +64,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index["default"], {
           ratio: "4/3",
@@ -77,3 +77,3 @@ style: {
       it('should render wrapper for children', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -83,3 +83,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
           ratio: "4/3"
@@ -91,3 +91,3 @@ }, innerImage)).toJSON();
       it('should support number as props', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -97,3 +97,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
           ratio: 0.75
@@ -105,3 +105,3 @@ }, innerImage)).toJSON();
       it('custom style willl be adpoted', function () {
-        var innerImage = _react["default"].createElement("img", {
+        var innerImage = /*#__PURE__*/_react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -111,3 +111,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
           ratio: "4/3",
@@ -114,0 +114,0 @@ style: {

dist/umd/react-15.6.js

@@ -84,3 +84,5 @@ (function (global, factory) {
 
-      return (// $FlowFixMe
+      return (
+        /*#__PURE__*/
+        // $FlowFixMe
         _react["default"].createElement("div", _extends({
@@ -87,0 +89,0 @@ ref: this.setNode,

dist/umd/react-latest.js

@@ -39,3 +39,5 @@ (function (global, factory) {
 
-    return (// $FlowFixMe
+    return (
+      /*#__PURE__*/
+      // $FlowFixMe
       _react["default"].createElement("div", _extends({
@@ -42,0 +44,0 @@ style: newStyle

dist/umd/stories/index.js

@@ -23,7 +23,7 @@ (function (global, factory) {
   var PageTitle = function PageTitle() {
-    return _react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "page__title"
-    }, _react["default"].createElement("h1", {
+    }, /*#__PURE__*/_react["default"].createElement("h1", {
       className: "page__title-main"
-    }, "React Apect Ratio", _react["default"].createElement("a", {
+    }, "React Apect Ratio", /*#__PURE__*/_react["default"].createElement("a", {
       className: "github mui-icon",
@@ -34,7 +34,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
       title: "github"
-    }, _react["default"].createElement("span", {
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       style: {
         visibility: 'hidden'
       }
-    }, " Github "))), _react["default"].createElement("p", {
+    }, " Github "))), /*#__PURE__*/_react["default"].createElement("p", {
       className: "page__title-desc"
@@ -49,9 +49,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
         contentNode = _ref.contentNode;
-    return _react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "card"
-    }, _react["default"].createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "card__head"
-    }, _react["default"].createElement("h3", {
+    }, /*#__PURE__*/_react["default"].createElement("h3", {
       className: "card__title"
-    }, titleText)), _react["default"].createElement("div", {
+    }, titleText)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "card__conent"
@@ -62,5 +62,5 @@ }, contentNode));
   (0, _react2.storiesOf)('AspectRatio', module).add('Image', function () {
-    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
       titleText: "Image with Aspect Ratio",
-      contentNode: _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_index.AspectRatio, {
+      contentNode: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: "300/165",
@@ -71,11 +71,11 @@ style: {
         }
-      }, _react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
         alt: "demo"
-      })), _react["default"].createElement("p", null, lorem))
+      })), /*#__PURE__*/_react["default"].createElement("p", null, lorem))
     }));
   }).add('Image with number', function () {
-    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
       titleText: "Image with Aspect Ratio (pass number as props)",
-      contentNode: _react["default"].createElement(_index.AspectRatio, {
+      contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: 0.75,
@@ -85,3 +85,3 @@ style: {
         }
-      }, _react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement("img", {
         src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
@@ -92,5 +92,5 @@ alt: "demo"
   }).add('Background Image', function () {
-    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
       titleText: "Background image with aspect ratio",
-      contentNode: _react["default"].createElement(_index.AspectRatio, {
+      contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: "3/4",
@@ -118,13 +118,13 @@ style: {
     }];
-    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
       titleText: "Image Gallery with Aspect Ratio",
-      contentNode: _react["default"].createElement("div", {
+      contentNode: /*#__PURE__*/_react["default"].createElement("div", {
         className: "gallery"
       }, images.map(function (image) {
-        return _react["default"].createElement("div", {
+        return /*#__PURE__*/_react["default"].createElement("div", {
           className: "gallery__image",
           key: image.src
-        }, _react["default"].createElement(_index.AspectRatio, {
+        }, /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
           ratio: image.ratio
-        }, _react["default"].createElement("img", {
+        }, /*#__PURE__*/_react["default"].createElement("img", {
           src: image.src,
@@ -136,5 +136,5 @@ alt: "demo"
   }).add('Iframe', function () {
-    return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(PageTitle, null), /*#__PURE__*/_react["default"].createElement(Card, {
       titleText: "Iframe with aspect ratio",
-      contentNode: _react["default"].createElement(_index.AspectRatio, {
+      contentNode: /*#__PURE__*/_react["default"].createElement(_index.AspectRatio, {
         ratio: "560/315",
@@ -144,3 +144,3 @@ style: {
         }
-      }, _react["default"].createElement("iframe", {
+      }, /*#__PURE__*/_react["default"].createElement("iframe", {
         src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -147,0 +147,0 @@ frameBorder: "0",

package.json

 {
   "name": "react-aspect-ratio",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "React Aspect Ratio Component",
@@ -67,3 +67,5 @@ "author": "Roderick Hsiao <[e-mail]>",
   "main": "dist/index.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "bundlesize": [
@@ -70,0 +72,0 @@ {

README.md

@@ -9,4 +9,2 @@ <p align="center">
   <a href="https://circleci.com/gh/roderickhsiao/react-aspect-ratio"><img src="https://circleci.com/gh/roderickhsiao/react-aspect-ratio.svg?style=svg" alt="circleci"></a>
-  <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/roderickhsiao/react-aspect-ratio.svg" alt="Greenkeeper badge"></a>
-
 </p>
@@ -13,0 +11,0 @@

No alert changes

Improved metrics

Total package byte prevSize

84879

increased by3.22%

Lines of code

1346

increased by1.2%

Worsened metrics

Number of lines in readme file

133

decreased by-1.48%

No dependency changes