react-spinners - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0-alpha.1

BarLoader.js

@@ -38,5 +38,5 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, height = _a.height, color = _a.color, heightUnit = _a.heightUnit;
+            var _a = _this.props, height = _a.height, color = _a.color;
             return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n      display: block;\n      border-radius: 2px;\n      will-change: left, right;\n      animation-fill-mode: forwards;\n      animation: ", " 2.1s ", "\n        ", "\n        infinite;\n    "], ["\n      position: absolute;\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n      display: block;\n      border-radius: 2px;\n      will-change: left, right;\n      animation-fill-mode: forwards;\n      animation: ", " 2.1s ", "\n        ",
-                "\n        infinite;\n    "])), "" + height + heightUnit, color, i === 1 ? long : short, i === 2 ? "1.15s" : "", i === 1
+                "\n        infinite;\n    "])), helpers_1.cssValue(height), color, i === 1 ? long : short, i === 2 ? "1.15s" : "", i === 1
                 ? "cubic-bezier(0.65, 0.815, 0.735, 0.395)"
@@ -46,4 +46,4 @@ : "cubic-bezier(0.165, 0.84, 0.44, 1)");
         _this.wrapper = function () {
-            var _a = _this.props, width = _a.width, height = _a.height, color = _a.color, heightUnit = _a.heightUnit, widthUnit = _a.widthUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n    "])), "" + width + widthUnit, "" + height + heightUnit, helpers_1.calculateRgba(color, 0.2));
+            var _a = _this.props, width = _a.width, height = _a.height, color = _a.color;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      overflow: hidden;\n      background-color: ", ";\n      background-clip: padding-box;\n    "])), helpers_1.cssValue(width), helpers_1.cssValue(height), helpers_1.calculateRgba(color, 0.2));
         };
@@ -50,0 +50,0 @@ return _this;

BeatLoader.js

@@ -37,4 +37,4 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " 0.7s ", " infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " 0.7s ", " infinite linear;\n      animation-fill-mode: both;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, margin, beat, i % 2 ? "0s" : "0.35s");
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " 0.7s ", " infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " 0.7s ", " infinite linear;\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, i % 2 ? "0s" : "0.35s");
         };
@@ -41,0 +41,0 @@ return _this;

BounceLoader.d.ts

@@ -5,3 +5,3 @@ /** @jsx jsx */
 declare class Loader extends React.PureComponent<LoaderSizeProps> {
-    static defaultProps: LoaderSizeProps;
+    static defaultProps: Required<LoaderSizeProps>;
     style: StyleFunctionWithIndex;
@@ -8,0 +8,0 @@ wrapper: StyleFunction;

BounceLoader.js

@@ -37,8 +37,8 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, color = _a.color, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      animation-fill-mode: both;\n      animation: ", " 2.1s ", " infinite ease-in-out;\n    "], ["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      animation-fill-mode: both;\n      animation: ", " 2.1s ", " infinite ease-in-out;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit, color, bounce, i === 1 ? "1s" : "0s");
+            var _a = _this.props, color = _a.color, size = _a.size;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      animation-fill-mode: both;\n      animation: ", " 2.1s ", " infinite ease-in-out;\n    "], ["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      opacity: 0.6;\n      top: 0;\n      left: 0;\n      animation-fill-mode: both;\n      animation: ", " 2.1s ", " infinite ease-in-out;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size), color, bounce, i === 1 ? "1s" : "0s");
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size));
         };
@@ -45,0 +45,0 @@ return _this;

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+## 0.7.0-alpha.1
+
+- **BREAKING CHANGE**: all unit props are deprecated, including `sizeUnit`, `heightUnit`, `widthUnit`, and `radiusUnit`. The `size`, `height`, `width`, and `radius` props now accepts `number` and `string`. 
+  - If value is number, default to `px`
+  - If value is string with valid css unit, return the input value
+  - If value is string with invalid css unit, output warning console log and default to `px`
+- `margin` prop now work the same way as other length props. Can accept `number` and `string`
+- `css` prop default is now `""`. No functionality change here
+
 ## 0.6.1
@@ -7,0 +16,0 @@

CircleLoader.js

@@ -37,8 +37,9 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, color = _a.color, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      border: 1px solid ", ";\n      border-radius: 100%;\n      transition: 2s;\n      border-bottom: none;\n      border-right: none;\n      top: ", "%;\n      left: ", "%;\n      animation-fill-mode: \"\";\n      animation: ", " 1s ", "s infinite linear;\n    "], ["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      border: 1px solid ", ";\n      border-radius: 100%;\n      transition: 2s;\n      border-bottom: none;\n      border-right: none;\n      top: ", "%;\n      left: ", "%;\n      animation-fill-mode: \"\";\n      animation: ", " 1s ", "s infinite linear;\n    "])), "" + size * (1 - i / 10) + sizeUnit, "" + size * (1 - i / 10) + sizeUnit, color, i * 0.7 * 2.5, i * 0.35 * 2.5, circle, i * 0.2);
+            var _a = _this.props, size = _a.size, color = _a.color;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      border: 1px solid ", ";\n      border-radius: 100%;\n      transition: 2s;\n      border-bottom: none;\n      border-right: none;\n      top: ", "%;\n      left: ", "%;\n      animation-fill-mode: \"\";\n      animation: ", " 1s ", "s infinite linear;\n    "], ["\n      position: absolute;\n      height: ", ";\n      width: ", ";\n      border: 1px solid ", ";\n      border-radius: 100%;\n      transition: 2s;\n      border-bottom: none;\n      border-right: none;\n      top: ", "%;\n      left: ", "%;\n      animation-fill-mode: \"\";\n      animation: ", " 1s ", "s infinite linear;\n    "])), "" + value * (1 - i / 10) + unit, "" + value * (1 - i / 10) + unit, color, i * 0.7 * 2.5, i * 0.35 * 2.5, circle, i * 0.2);
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size));
         };
@@ -45,0 +46,0 @@ return _this;

ClimbingBoxLoader.js

@@ -41,4 +41,4 @@ "use strict";
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-top: -2.7em;\n      margin-left: -2.7em;\n      width: 5.4em;\n      height: 5.4em;\n      font-size: ", ";\n    "], ["\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-top: -2.7em;\n      margin-left: -2.7em;\n      width: 5.4em;\n      height: 5.4em;\n      font-size: ", ";\n    "])), "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-top: -2.7em;\n      margin-left: -2.7em;\n      width: 5.4em;\n      height: 5.4em;\n      font-size: ", ";\n    "], ["\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin-top: -2.7em;\n      margin-left: -2.7em;\n      width: 5.4em;\n      height: 5.4em;\n      font-size: ", ";\n    "])), helpers_1.cssValue(size));
         };
@@ -45,0 +45,0 @@ _this.hill = function () {

ClipLoader.js

@@ -30,3 +30,3 @@ "use strict";
 var core_1 = require("@emotion/core");
-var proptypes_1 = require("./helpers/proptypes");
+var helpers_1 = require("./helpers");
 var clip = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {transform: rotate(0deg) scale(1)}\n  50% {transform: rotate(180deg) scale(0.8)}\n  100% {transform: rotate(360deg) scale(1)}\n"], ["\n  0% {transform: rotate(0deg) scale(1)}\n  50% {transform: rotate(180deg) scale(0.8)}\n  100% {transform: rotate(360deg) scale(1)}\n"])));
@@ -38,4 +38,4 @@ var Loader = /** @class */ (function (_super) {
         _this.style = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: transparent !important;\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n      border: 2px solid;\n      border-color: ", ";\n      border-bottom-color: transparent;\n      display: inline-block;\n      animation: ", " 0.75s 0s infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      background: transparent !important;\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n      border: 2px solid;\n      border-color: ", ";\n      border-bottom-color: transparent;\n      display: inline-block;\n      animation: ", " 0.75s 0s infinite linear;\n      animation-fill-mode: both;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit, color, clip);
+            var _a = _this.props, size = _a.size, color = _a.color;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: transparent !important;\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n      border: 2px solid;\n      border-color: ", ";\n      border-bottom-color: transparent;\n      display: inline-block;\n      animation: ", " 0.75s 0s infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      background: transparent !important;\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n      border: 2px solid;\n      border-color: ", ";\n      border-bottom-color: transparent;\n      display: inline-block;\n      animation: ", " 0.75s 0s infinite linear;\n      animation-fill-mode: both;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size), color, clip);
         };
@@ -48,3 +48,3 @@ return _this;
     };
-    Loader.defaultProps = proptypes_1.sizeDefaults(35);
+    Loader.defaultProps = helpers_1.sizeDefaults(35);
     return Loader;
@@ -51,0 +51,0 @@ }(React.PureComponent));

DotLoader.js

@@ -38,8 +38,9 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      animation: ", " 2s ", " infinite linear;\n    "], ["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      animation: ", " 2s ", " infinite linear;\n    "])), i % 2 ? "0" : "auto", i % 2 ? "auto" : "0", "" + size / 2 + sizeUnit, "" + size / 2 + sizeUnit, color, bounce, i === 2 ? "-1s" : "0s");
+            var _a = _this.props, size = _a.size, color = _a.color;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      animation: ", " 2s ", " infinite linear;\n    "], ["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      animation: ", " 2s ", " infinite linear;\n    "])), i % 2 ? "0" : "auto", i % 2 ? "auto" : "0", "" + value / 2 + unit, "" + value / 2 + unit, color, bounce, i === 2 ? "-1s" : "0s");
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation-fill-mode: forwards;\n      animation: ", " 2s 0s infinite linear;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation-fill-mode: forwards;\n      animation: ", " 2s 0s infinite linear;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit, rotate);
+            var size = _this.props.size;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation-fill-mode: forwards;\n      animation: ", " 2s 0s infinite linear;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation-fill-mode: forwards;\n      animation: ", " 2s 0s infinite linear;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size), rotate);
         };
@@ -46,0 +47,0 @@ return _this;

FadeLoader.js

@@ -39,4 +39,4 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, height = _a.height, width = _a.width, margin = _a.margin, color = _a.color, radius = _a.radius, widthUnit = _a.widthUnit, heightUnit = _a.heightUnit, radiusUnit = _a.radiusUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      transition: 2s;\n      animation-fill-mode: \"both\";\n      animation: ", " 1.2s ", "s infinite ease-in-out;\n    "], ["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      transition: 2s;\n      animation-fill-mode: \"both\";\n      animation: ", " 1.2s ", "s infinite ease-in-out;\n    "])), "" + width + widthUnit, "" + height + heightUnit, margin, color, "" + radius + radiusUnit, fade, i * 0.12);
+            var _a = _this.props, height = _a.height, width = _a.width, margin = _a.margin, color = _a.color, radius = _a.radius;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      transition: 2s;\n      animation-fill-mode: \"both\";\n      animation: ", " 1.2s ", "s infinite ease-in-out;\n    "], ["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      background-color: ", ";\n      border-radius: ", ";\n      transition: 2s;\n      animation-fill-mode: \"both\";\n      animation: ", " 1.2s ", "s infinite ease-in-out;\n    "])), helpers_1.cssValue(width), helpers_1.cssValue(height), helpers_1.cssValue(margin), color, helpers_1.cssValue(radius), fade, i * 0.12);
         };
@@ -43,0 +43,0 @@ _this.wrapper = function () {

GridLoader.js

@@ -38,8 +38,12 @@ "use strict";
         _this.style = function (rand) {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation-fill-mode: \"both\";\n      animation: ", " ", "s ", "s infinite ease;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation-fill-mode: \"both\";\n      animation: ", " ", "s ", "s infinite ease;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, margin, grid, rand / 100 + 0.6, rand / 100 - 0.2);
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation-fill-mode: \"both\";\n      animation: ", " ", "s ", "s infinite ease;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation-fill-mode: \"both\";\n      animation: ", " ", "s ", "s infinite ease;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), grid, rand / 100 + 0.6, rand / 100 - 0.2);
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n      font-size: 0;\n    "], ["\n      width: ", ";\n      font-size: 0;\n    "])), "" + (parseFloat(size.toString()) * 3 + parseFloat(margin) * 6) + sizeUnit);
+            var _a = _this.props, size = _a.size, margin = _a.margin;
+            var sizeWithUnit = helpers_1.parseLengthAndUnit(size);
+            var marginWithUnit = helpers_1.parseLengthAndUnit(margin);
+            var width = "" + (parseFloat(sizeWithUnit.value.toString()) * 3 +
+                parseFloat(marginWithUnit.value.toString()) * 6) + sizeWithUnit.unit;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      width: ", ";\n      font-size: 0;\n    "], ["\n      width: ", ";\n      font-size: 0;\n    "])), width);
         };
@@ -46,0 +50,0 @@ return _this;

HashLoader.js

@@ -37,7 +37,9 @@ "use strict";
             var size = _this.props.size;
-            return size / 5;
+            var value = index_1.parseLengthAndUnit(size).value;
+            return value / 5;
         };
         _this.lat = function () {
             var size = _this.props.size;
-            return (size - _this.thickness()) / 2;
+            var value = index_1.parseLengthAndUnit(size).value;
+            return (value - _this.thickness()) / 2;
         };
@@ -50,3 +52,3 @@ _this.offset = function () { return _this.lat() - _this.thickness(); };
         _this.before = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
+            var size = _this.props.size;
             var color = _this.color();
@@ -56,6 +58,6 @@ var lat = _this.lat();
             var offset = _this.offset();
-            return core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      0% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {width: ", ";box-shadow: 0 ", "px ", ", 0 ", "px ", "}\n      70% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "], ["\n      0% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {width: ", ";box-shadow: 0 ", "px ", ", 0 ", "px ", "}\n      70% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "])), thickness, lat, -offset, color, -lat, offset, color, "" + size + sizeUnit, -offset, color, offset, color, thickness, -lat, -offset, color, lat, offset, color, lat, -offset, color, -lat, offset, color);
+            return core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      0% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {width: ", ";box-shadow: 0 ", "px ", ", 0 ", "px ", "}\n      70% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "], ["\n      0% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {width: ", ";box-shadow: 0 ", "px ", ", 0 ", "px ", "}\n      70% {width: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "])), thickness, lat, -offset, color, -lat, offset, color, index_1.cssValue(size), -offset, color, offset, color, thickness, -lat, -offset, color, lat, offset, color, lat, -offset, color, -lat, offset, color);
         };
         _this.after = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
+            var size = _this.props.size;
             var color = _this.color();
@@ -65,11 +67,12 @@ var lat = _this.lat();
             var offset = _this.offset();
-            return core_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      0% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {height: ", ";box-shadow: ", "px 0 ", ", ", "px 0 ", "}\n      70% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "], ["\n      0% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {height: ", ";box-shadow: ", "px 0 ", ", ", "px 0 ", "}\n      70% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "])), thickness, offset, lat, color, -offset, -lat, color, "" + size + sizeUnit, offset, color, -offset, color, thickness, offset, -lat, color, -offset, lat, color, offset, lat, color, -offset, -lat, color);
+            return core_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      0% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {height: ", ";box-shadow: ", "px 0 ", ", ", "px 0 ", "}\n      70% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "], ["\n      0% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      35% {height: ", ";box-shadow: ", "px 0 ", ", ", "px 0 ", "}\n      70% {height: ", "px;box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n      100% {box-shadow: ", "px ", "px ", ", ", "px ", "px ", "}\n    "])), thickness, offset, lat, color, -offset, -lat, color, index_1.cssValue(size), offset, color, -offset, color, thickness, offset, -lat, color, -offset, lat, color, offset, lat, color, -offset, -lat, color);
         };
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      content: \"\";\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n      transform: translate(-50%, -50%);\n      animation-fill-mode: none;\n      animation: ", " 2s infinite;\n    "], ["\n      position: absolute;\n      content: \"\";\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n      transform: translate(-50%, -50%);\n      animation-fill-mode: none;\n      animation: ", " 2s infinite;\n    "])), "" + size / 5 + sizeUnit, "" + size / 5 + sizeUnit, "" + size / 10 + sizeUnit, i === 1 ? _this.before() : _this.after());
+            var size = _this.props.size;
+            var _a = index_1.parseLengthAndUnit(size), value = _a.value, unit = _a.unit;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      content: \"\";\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n      transform: translate(-50%, -50%);\n      animation-fill-mode: none;\n      animation: ", " 2s infinite;\n    "], ["\n      position: absolute;\n      content: \"\";\n      top: 50%;\n      left: 50%;\n      display: block;\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n      transform: translate(-50%, -50%);\n      animation-fill-mode: none;\n      animation: ", " 2s infinite;\n    "])), "" + value / 5 + unit, "" + value / 5 + unit, "" + value / 10 + unit, i === 1 ? _this.before() : _this.after());
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      transform: rotate(165deg);\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      transform: rotate(165deg);\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      transform: rotate(165deg);\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      transform: rotate(165deg);\n    "])), index_1.cssValue(size), index_1.cssValue(size));
         };
@@ -76,0 +79,0 @@ return _this;

helpers/index.d.ts

 export * from "./proptypes";
 export * from "./colors";
+export * from "./unitConverter";

helpers/index.js

@@ -8,1 +8,2 @@ "use strict";
 __export(require("./colors"));
+__export(require("./unitConverter"));

helpers/proptypes.d.ts

@@ -1,11 +0,5 @@
-export interface DefaultProps {
-    [key: string]: boolean | string | {} | number;
-}
-declare type HeightWidthFunction = (height: number, width: number) => DefaultProps;
-declare type HeightWidthRadiusFunction = (height: number, width: number, radius?: number) => DefaultProps;
-declare type SizeFunction = (size: number) => DefaultProps;
-export declare const sizeDefaults: SizeFunction;
-export declare const sizeMarginDefaults: SizeFunction;
-export declare const heightWidthDefaults: HeightWidthFunction;
-export declare const heightWidthRadiusDefaults: HeightWidthRadiusFunction;
-export {};
+import { LoaderHeightWidthProps, LoaderSizeProps, LoaderSizeMarginProps, LoaderHeightWidthRadiusProps } from "../interfaces";
+export declare function sizeDefaults(sizeValue: number): Required<LoaderSizeProps>;
+export declare function sizeMarginDefaults(sizeValue: number): Required<LoaderSizeMarginProps>;
+export declare function heightWidthDefaults(height: number, width: number): Required<LoaderHeightWidthProps>;
+export declare function heightWidthRadiusDefaults(height: number, width: number, radius?: number): Required<LoaderHeightWidthRadiusProps>;

helpers/proptypes.js

 "use strict";
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-/*
- * List of string constants to represent different props
- */
-var LOADING = "loading";
-var COLOR = "color";
-var CSS = "css";
-var SIZE = "size";
-var SIZE_UNIT = "sizeUnit";
-var WIDTH = "width";
-var WIDTH_UNIT = "widthUnit";
-var HEIGHT = "height";
-var HEIGHT_UNIT = "heightUnit";
-var RADIUS = "radius";
-var RADIUS_UNIT = "radiusUnit";
-var MARGIN = "margin";
-var commonValues = (_a = {},
-    _a[LOADING] = true,
-    _a[COLOR] = "#000000",
-    _a[CSS] = {},
-    _a);
-var heightWidthValues = function (height, width) {
-    var _a;
-    return (_a = {},
-        _a[HEIGHT] = height,
-        _a[HEIGHT_UNIT] = "px",
-        _a[WIDTH] = width,
-        _a[WIDTH_UNIT] = "px",
-        _a);
+var commonValues = {
+    loading: true,
+    color: "#000000",
+    css: ""
 };
-var sizeValues = function (sizeValue) {
-    var _a;
-    return (_a = {},
-        _a[SIZE] = sizeValue,
-        _a[SIZE_UNIT] = "px",
-        _a);
-};
-exports.sizeDefaults = function (sizeValue) {
-    return Object.assign({}, commonValues, sizeValues(sizeValue));
-};
-exports.sizeMarginDefaults = function (sizeValue) {
-    var _a;
-    return Object.assign({}, exports.sizeDefaults(sizeValue), (_a = {},
-        _a[MARGIN] = "2px",
-        _a));
-};
-exports.heightWidthDefaults = function (height, width) {
-    return Object.assign({}, commonValues, heightWidthValues(height, width));
-};
-exports.heightWidthRadiusDefaults = function (height, width, radius) {
-    var _a;
+function sizeDefaults(sizeValue) {
+    return Object.assign({}, commonValues, { size: sizeValue });
+}
+exports.sizeDefaults = sizeDefaults;
+function sizeMarginDefaults(sizeValue) {
+    return Object.assign({}, sizeDefaults(sizeValue), {
+        margin: 2
+    });
+}
+exports.sizeMarginDefaults = sizeMarginDefaults;
+function heightWidthDefaults(height, width) {
+    return Object.assign({}, commonValues, {
+        height: height,
+        width: width
+    });
+}
+exports.heightWidthDefaults = heightWidthDefaults;
+function heightWidthRadiusDefaults(height, width, radius) {
     if (radius === void 0) { radius = 2; }
-    return Object.assign({}, exports.heightWidthDefaults(height, width), (_a = {},
-        _a[RADIUS] = radius,
-        _a[RADIUS_UNIT] = "px",
-        _a[MARGIN] = "2px",
-        _a));
-};
+    return Object.assign({}, heightWidthDefaults(height, width), {
+        radius: radius,
+        margin: 2
+    });
+}
+exports.heightWidthRadiusDefaults = heightWidthRadiusDefaults;

interfaces.d.ts

@@ -5,2 +5,6 @@ export interface PrecompiledCss {
 }
+export interface LengthObject {
+    value: number;
+    unit: string;
+}
 export declare type StyleFunction = () => PrecompiledCss;
@@ -14,20 +18,17 @@ export declare type StyleFunctionWithIndex = (i: number) => PrecompiledCss;
 }
+declare type LengthType = number | string;
 export interface LoaderHeightWidthProps extends CommonProps {
-    height?: number;
-    heightUnit?: string;
-    width?: number;
-    widthUnit?: string;
+    height?: LengthType;
+    width?: LengthType;
 }
 export interface LoaderSizeProps extends CommonProps {
-    size?: number;
-    sizeUnit?: string;
+    size?: LengthType;
 }
 export interface LoaderSizeMarginProps extends LoaderSizeProps {
-    margin?: string;
+    margin?: LengthType;
 }
 export interface LoaderHeightWidthRadiusProps extends LoaderHeightWidthProps {
-    margin?: string;
-    radius?: number;
-    radiusUnit?: string;
+    margin?: LengthType;
+    radius?: LengthType;
 }
 export {};

MoonLoader.js

@@ -38,19 +38,22 @@ "use strict";
             var size = _this.props.size;
-            return size / 7;
+            var value = helpers_1.parseLengthAndUnit(size).value;
+            return value / 7;
         };
         _this.ballStyle = function (size) {
-            var sizeUnit = _this.props.sizeUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n    "], ["\n      width: ", ";\n      height: ", ";\n      border-radius: 100%;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size));
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "])), "" + (size + _this.moonSize() * 2) + sizeUnit, "" + (size + _this.moonSize() * 2) + sizeUnit, moon);
+            var size = _this.props.size;
+            var _a = helpers_1.parseLengthAndUnit(size), value = _a.value, unit = _a.unit;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "], ["\n      position: relative;\n      width: ", ";\n      height: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "])), "" + (value + _this.moonSize() * 2) + unit, "" + (value + _this.moonSize() * 2) + unit, moon);
         };
         _this.ball = function () {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n      background-color: ", ";\n      opacity: 0.8;\n      position: absolute;\n      top: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "], ["\n      ", ";\n      background-color: ", ";\n      opacity: 0.8;\n      position: absolute;\n      top: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "])), _this.ballStyle(_this.moonSize()), color, "" + (size / 2 - _this.moonSize() / 2) + sizeUnit, moon);
+            var _a = _this.props, color = _a.color, size = _a.size;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n      background-color: ", ";\n      opacity: 0.8;\n      position: absolute;\n      top: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "], ["\n      ", ";\n      background-color: ", ";\n      opacity: 0.8;\n      position: absolute;\n      top: ", ";\n      animation: ", " 0.6s 0s infinite linear;\n      animation-fill-mode: forwards;\n    "])), _this.ballStyle(_this.moonSize()), color, "" + (value / 2 - _this.moonSize() / 2) + unit, moon);
         };
         _this.circle = function () {
             var _a = _this.props, size = _a.size, color = _a.color;
-            return core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      ", ";\n      border: ", "px solid ", ";\n      opacity: 0.1;\n    "], ["\n      ", ";\n      border: ", "px solid ", ";\n      opacity: 0.1;\n    "])), _this.ballStyle(size), _this.moonSize(), color);
+            var value = helpers_1.parseLengthAndUnit(size).value;
+            return core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      ", ";\n      border: ", "px solid ", ";\n      opacity: 0.1;\n    "], ["\n      ", ";\n      border: ", "px solid ", ";\n      opacity: 0.1;\n    "])), _this.ballStyle(value), _this.moonSize(), color);
         };
@@ -57,0 +60,0 @@ return _this;

package.json

 {
   "name": "react-spinners",
-  "version": "0.6.1",
+  "version": "0.7.0-alpha.1",
   "description": "A collection of react loading spinners",
@@ -59,3 +59,3 @@ "repository": {
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@types/jest": "^24.0.17",
+    "@types/jest": "^24.0.21",
     "@types/react": "^16.9.1",
@@ -72,3 +72,3 @@ "@types/react-click-outside": "^3.0.3",
     "enzyme-to-json": "^3.4.0",
-    "fork-ts-checker-webpack-plugin": "^1.5.0",
+    "fork-ts-checker-webpack-plugin": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
@@ -81,3 +81,3 @@ "jest": "^24.8.0",
     "react-dom": "^16.9.0",
-    "ts-jest": "^24.0.2",
+    "ts-jest": "^24.1.0",
     "ts-loader": "^6.0.4",
@@ -84,0 +84,0 @@ "tslint": "^5.18.0",

PacmanLoader.js

@@ -40,26 +40,28 @@ "use strict";
         _this.ball = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      75% {opacity: 0.7}\n      100% {transform: translate(", ", ", ")}\n    "], ["\n      75% {opacity: 0.7}\n      100% {transform: translate(", ", ", ")}\n    "])), "" + -4 * size + sizeUnit, "" + -size / 4 + sizeUnit);
+            var size = _this.props.size;
+            var _a = helpers_1.parseLengthAndUnit(size), value = _a.value, unit = _a.unit;
+            return core_1.keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      75% {opacity: 0.7}\n      100% {transform: translate(", ", ", ")}\n    "], ["\n      75% {opacity: 0.7}\n      100% {transform: translate(", ", ", ")}\n    "])), "" + -4 * value + unit, "" + -value / 4 + unit);
         };
         _this.ballStyle = function (i) {
-            var _a = _this.props, color = _a.color, margin = _a.margin, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      transform: translate(0, ", ");\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      animation: ", " 1s ", "s infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      transform: translate(0, ", ");\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      animation: ", " 1s ", "s infinite linear;\n      animation-fill-mode: both;\n    "])), "" + size / 3 + sizeUnit, "" + size / 3 + sizeUnit, color, margin, "" + -size / 4 + sizeUnit, "" + size + sizeUnit, "" + size * 4 + sizeUnit, _this.ball(), i * 0.25);
+            var _a = _this.props, color = _a.color, margin = _a.margin, size = _a.size;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      transform: translate(0, ", ");\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      animation: ", " 1s ", "s infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      width: ", ";\n      height: ", ";\n      background-color: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      transform: translate(0, ", ");\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      animation: ", " 1s ", "s infinite linear;\n      animation-fill-mode: both;\n    "])), "" + value / 3 + unit, "" + value / 3 + unit, color, helpers_1.cssValue(margin), "" + -value / 4 + unit, "" + value + unit, "" + value * 4 + unit, _this.ball(), i * 0.25);
         };
         _this.s1 = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return "" + size + sizeUnit + " solid transparent";
+            var size = _this.props.size;
+            return helpers_1.cssValue(size) + " solid transparent";
         };
         _this.s2 = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return "" + size + sizeUnit + " solid " + color;
+            var _a = _this.props, size = _a.size, color = _a.color;
+            return helpers_1.cssValue(size) + " solid " + color;
         };
         _this.pacmanStyle = function (i) {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
+            var size = _this.props.size;
             var s1 = _this.s1();
             var s2 = _this.s2();
-            return core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 0;\n      height: 0;\n      border-right: ", ";\n      border-top: ", ";\n      border-left: ", ";\n      border-bottom: ", ";\n      border-radius: ", ";\n      position: absolute;\n      animation: ", " 0.8s infinite ease-in-out;\n      animation-fill-mode: both;\n    "], ["\n      width: 0;\n      height: 0;\n      border-right: ", ";\n      border-top: ", ";\n      border-left: ", ";\n      border-bottom: ", ";\n      border-radius: ", ";\n      position: absolute;\n      animation: ", " 0.8s infinite ease-in-out;\n      animation-fill-mode: both;\n    "])), s1, i === 0 ? s1 : s2, s2, i === 0 ? s2 : s1, "" + size + sizeUnit, pacman[i]);
+            return core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 0;\n      height: 0;\n      border-right: ", ";\n      border-top: ", ";\n      border-left: ", ";\n      border-bottom: ", ";\n      border-radius: ", ";\n      position: absolute;\n      animation: ", " 0.8s infinite ease-in-out;\n      animation-fill-mode: both;\n    "], ["\n      width: 0;\n      height: 0;\n      border-right: ", ";\n      border-top: ", ";\n      border-left: ", ";\n      border-bottom: ", ";\n      border-radius: ", ";\n      position: absolute;\n      animation: ", " 0.8s infinite ease-in-out;\n      animation-fill-mode: both;\n    "])), s1, i === 0 ? s1 : s2, s2, i === 0 ? s2 : s1, helpers_1.cssValue(size), pacman[i]);
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n      font-size: 0;\n      height: ", ";\n      width: ", ";\n    "], ["\n      position: relative;\n      font-size: 0;\n      height: ", ";\n      width: ", ";\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n      font-size: 0;\n      height: ", ";\n      width: ", ";\n    "], ["\n      position: relative;\n      font-size: 0;\n      height: ", ";\n      width: ", ";\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size));
         };
@@ -66,0 +68,0 @@ _this.pac = function () { return _this.pacmanStyle(0); };

PropagateLoader.js

@@ -46,4 +46,5 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return core_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      font-size: ", ";\n      width: ", ";\n      height: ", ";\n      background: ", ";\n      border-radius: 50%;\n      animation: ", " 1.5s infinite;\n      animation-fill-mode: forwards;\n    "], ["\n      position: absolute;\n      font-size: ", ";\n      width: ", ";\n      height: ", ";\n      background: ", ";\n      border-radius: 50%;\n      animation: ", " 1.5s infinite;\n      animation-fill-mode: forwards;\n    "])), "" + size / 3 + sizeUnit, "" + size + sizeUnit, "" + size + sizeUnit, color, propagate[i]);
+            var _a = _this.props, size = _a.size, color = _a.color;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      position: absolute;\n      font-size: ", ";\n      width: ", ";\n      height: ", ";\n      background: ", ";\n      border-radius: 50%;\n      animation: ", " 1.5s infinite;\n      animation-fill-mode: forwards;\n    "], ["\n      position: absolute;\n      font-size: ", ";\n      width: ", ";\n      height: ", ";\n      background: ", ";\n      border-radius: 50%;\n      animation: ", " 1.5s infinite;\n      animation-fill-mode: forwards;\n    "])), "" + value / 3 + unit, "" + value + unit, "" + value + unit, color, propagate[i]);
         };
@@ -50,0 +51,0 @@ _this.wrapper = function () {

PulseLoader.js

@@ -37,4 +37,4 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.75s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.75s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, margin, pulse, i * 0.12);
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.75s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.75s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), pulse, i * 0.12);
         };
@@ -41,0 +41,0 @@ return _this;

README.md

@@ -74,4 +74,3 @@ # React Spinners
           css={override}
-          sizeUnit={"px"}
-          size={150}
+          size={150} // or 150px
           color={'#123abc'}
@@ -101,8 +100,14 @@ loading={this.state.loading}
 
-For `size`, `height`, `width`, and `radius` props, there are `sizeUnit`, `heightUnit`, `widthUnit` and `radiusUnit` prop that accepts `px`, `%`, or `em`. The default for the unit prop is `px`.
+For `size`, `height`, `width`, and `radius` props, the input can be number or string.
 
-|            Loader | size:int | height:int | width:int | radius:int | margin:str |
+- If value is number, the loader will default to css unit `px`. 
+- If value is string, the loader will verify the unit against valid css units.
+  - If unit is valid, return the original value
+  - If unit is invalid, output warning console log and default to `px`.
+
+
+|            Loader |   size   |   height   |   width   |   radius   |  margin    |
 | ----------------: | :------: | :--------: | :-------: | :--------: | :--------: |
 |         BarLoader |          |    `4`     |   `100`   |            |
-|        BeatLoader |   `15`   |            |           |            |   `2px`    |
+|        BeatLoader |   `15`   |            |           |            |    `2`     |
 |      BounceLoader |   `60`   |            |           |            |
@@ -112,14 +117,14 @@ |      CircleLoader |   `50`   |            |           |            |
 | ClimbingBoxLoader |   `15`   |            |           |            |
-|         DotLoader |   `60`   |            |           |            |   `2px`    |
-|        FadeLoader |          |    `15`    |    `5`    |    `2`     |   `2px`    |
+|         DotLoader |   `60`   |            |           |            |    `2`     |
+|        FadeLoader |          |    `15`    |    `5`    |    `2`     |    `2`     |
 |        GridLoader |   `15`   |            |           |            |
-|        HashLoader |   `50`   |            |           |            |   `2px`    |
-|        MoonLoader |   `60`   |            |           |            |   `2px`    |
-|      PacmanLoader |   `25`   |            |           |            |   `2px`    |
+|        HashLoader |   `50`   |            |           |            |    `2`     |
+|        MoonLoader |   `60`   |            |           |            |    `2`     |
+|      PacmanLoader |   `25`   |            |           |            |    `2`     |
 |   PropagateLoader |   `15`   |            |           |            |
-|       PulseLoader |   `15`   |            |           |            |   `2px`    |
-|        RingLoader |   `60`   |            |           |            |   `2px`    |
-|        RiseLoader |   `15`   |            |           |            |   `2px`    |
-|      RotateLoader |   `15`   |            |           |            |   `2px`    |
-|       ScaleLoader |          |    `35`    |    `4`    |    `2`     |   `2px`    |
-|        SyncLoader |   `15`   |            |           |            |   `2px`    |
+|       PulseLoader |   `15`   |            |           |            |    `2`     |
+|        RingLoader |   `60`   |            |           |            |    `2`     |
+|        RiseLoader |   `15`   |            |           |            |    `2`     |
+|      RotateLoader |   `15`   |            |           |            |    `2`     |
+|       ScaleLoader |          |    `35`    |    `4`    |    `2`     |    `2`     |
+|        SyncLoader |   `15`   |            |           |            |    `2`     |

RingLoader.js

@@ -38,8 +38,9 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      border: ", " solid ", ";\n      opacity: 0.4;\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      perspective: 800px;\n      animation: ", " 2s 0s infinite linear;\n    "], ["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      border: ", " solid ", ";\n      opacity: 0.4;\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      perspective: 800px;\n      animation: ", " 2s 0s infinite linear;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit, "" + size / 10 + sizeUnit, color, i === 1 ? right : left);
+            var _a = _this.props, size = _a.size, color = _a.color;
+            var _b = helpers_1.parseLengthAndUnit(size), value = _b.value, unit = _b.unit;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      border: ", " solid ", ";\n      opacity: 0.4;\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      perspective: 800px;\n      animation: ", " 2s 0s infinite linear;\n    "], ["\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: ", ";\n      height: ", ";\n      border: ", " solid ", ";\n      opacity: 0.4;\n      border-radius: 100%;\n      animation-fill-mode: forwards;\n      perspective: 800px;\n      animation: ", " 2s 0s infinite linear;\n    "])), "" + value + unit, "" + value + unit, "" + value / 10 + unit, color, i === 1 ? right : left);
         };
         _this.wrapper = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      position: relative;\n    "], ["\n      width: ", ";\n      height: ", ";\n      position: relative;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit);
+            var size = _this.props.size;
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: ", ";\n      height: ", ";\n      position: relative;\n    "], ["\n      width: ", ";\n      height: ", ";\n      position: relative;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size));
         };
@@ -46,0 +47,0 @@ return _this;

RiseLoader.js

@@ -39,4 +39,4 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 1s 0s infinite cubic-bezier(0.15, 0.46, 0.9, 0.6);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 1s 0s infinite cubic-bezier(0.15, 0.46, 0.9, 0.6);\n      animation-fill-mode: both;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, "" + margin, i % 2 === 0 ? even : odd);
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 1s 0s infinite cubic-bezier(0.15, 0.46, 0.9, 0.6);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 1s 0s infinite cubic-bezier(0.15, 0.46, 0.9, 0.6);\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), i % 2 === 0 ? even : odd);
         };
@@ -43,0 +43,0 @@ return _this;

RotateLoader.js

@@ -38,4 +38,4 @@ "use strict";
         _this.ball = function () {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, margin);
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin));
         };
@@ -42,0 +42,0 @@ _this.wrapper = function () {

ScaleLoader.js

@@ -37,4 +37,4 @@ "use strict";
         _this.style = function (i) {
-            var _a = _this.props, color = _a.color, width = _a.width, height = _a.height, margin = _a.margin, radius = _a.radius, widthUnit = _a.widthUnit, heightUnit = _a.heightUnit, radiusUnit = _a.radiusUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " 1s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " 1s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "])), color, "" + width + widthUnit, "" + height + heightUnit, margin, "" + radius + radiusUnit, scale, i * 0.1);
+            var _a = _this.props, color = _a.color, width = _a.width, height = _a.height, margin = _a.margin, radius = _a.radius;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " 1s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " 1s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(width), helpers_1.cssValue(height), helpers_1.cssValue(margin), helpers_1.cssValue(radius), scale, i * 0.1);
         };
@@ -41,0 +41,0 @@ return _this;

SkewLoader.js

@@ -37,4 +37,4 @@ "use strict";
         _this.style = function () {
-            var _a = _this.props, size = _a.size, sizeUnit = _a.sizeUnit, color = _a.color;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 0;\n      height: 0;\n      border-left: ", " solid transparent;\n      border-right: ", " solid transparent;\n      border-bottom: ", " solid ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "], ["\n      width: 0;\n      height: 0;\n      border-left: ", " solid transparent;\n      border-right: ", " solid transparent;\n      border-bottom: ", " solid ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "])), "" + size + sizeUnit, "" + size + sizeUnit, "" + size + sizeUnit, color, skew);
+            var _a = _this.props, size = _a.size, color = _a.color;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: 0;\n      height: 0;\n      border-left: ", " solid transparent;\n      border-right: ", " solid transparent;\n      border-bottom: ", " solid ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "], ["\n      width: 0;\n      height: 0;\n      border-left: ", " solid transparent;\n      border-right: ", " solid transparent;\n      border-bottom: ", " solid ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "])), helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(size), color, skew);
         };
@@ -41,0 +41,0 @@ return _this;

SquareLoader.js

@@ -37,4 +37,4 @@ "use strict";
         _this.style = function () {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, square);
+            var _a = _this.props, color = _a.color, size = _a.size;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      display: inline-block;\n      animation: ", " 3s 0s infinite cubic-bezier(0.09, 0.57, 0.49, 0.9);\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), square);
         };
@@ -41,0 +41,0 @@ return _this;

SyncLoader.js

@@ -31,2 +31,3 @@ "use strict";
 var proptypes_1 = require("./helpers/proptypes");
+var helpers_1 = require("./helpers");
 var sync = core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  33% {transform: translateY(10px)}\n  66% {transform: translateY(-10px)}\n  100% {transform: translateY(0)}\n"], ["\n  33% {transform: translateY(10px)}\n  66% {transform: translateY(-10px)}\n  100% {transform: translateY(0)}\n"])));
@@ -38,4 +39,4 @@ var Loader = /** @class */ (function (_super) {
         _this.style = function (i) {
-            var _a = _this.props, color = _a.color, size = _a.size, sizeUnit = _a.sizeUnit, margin = _a.margin;
-            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.6s ", "s infinite ease-in-out;\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.6s ", "s infinite ease-in-out;\n      animation-fill-mode: both;\n    "])), color, "" + size + sizeUnit, "" + size + sizeUnit, margin, sync, i * 0.07);
+            var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin;
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.6s ", "s infinite ease-in-out;\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      display: inline-block;\n      animation: ", " 0.6s ", "s infinite ease-in-out;\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), sync, i * 0.07);
         };
@@ -42,0 +43,0 @@ return _this;

No alert changes

Improved metrics

Total package byte prevSize

133534

increased by2.2%

Number of package files

59

increased by3.51%

Lines of code

1907

increased by4.09%

Number of lines in readme file

128

increased by4.07%

No dependency changes