react-spinners-css - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

dist/Circle/index.js

@@ -1,44 +0,28 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var Circle =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Circle, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Circle() {
-    _classCallCheck(this, Circle);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Circle).apply(this, arguments));
-  }
-
-  _createClass(Circle, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          color = _this$props.color,
-          size = _this$props.size;
-      return React.createElement("div", {
-        className: "lds-circle",
-        style: {
-          background: color,
-          width: size,
-          height: size
-        }
-      });
-    }
-  }]);
-
-  return Circle;
-}(Component);
-
-export { Circle as default };
+import React from 'react';
+import './style.css';
+export default function Circle(_ref) {
+  var color = _ref.color,
+      size = _ref.size,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    className: "lds-circle ".concat(className),
+    style: _objectSpread({
+      background: color,
+      width: size,
+      height: size
+    }, style)
+  });
+}
 Circle.defaultProps = {
   color: '#7f58af',
-  size: 64
+  size: 64,
+  className: '',
+  style: {}
 };

dist/Default/index.js

@@ -0,6 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import React from 'react';
 import './style.css';
 export default function Default(_ref) {
-  var color = _ref.color;
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
@@ -17,7 +25,10 @@ var circles = _toConsumableArray(Array(12)).map(function (_, index) {
   return React.createElement("div", {
-    className: "lds-default"
+    className: "lds-default ".concat(className),
+    style: _objectSpread({}, style)
   }, circles);
 }
 Default.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/DualRing/index.js

@@ -1,40 +0,27 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var DualRing =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(DualRing, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function DualRing() {
-    _classCallCheck(this, DualRing);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(DualRing).apply(this, arguments));
-  }
-
-  _createClass(DualRing, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-dual-ring"
-      }, React.createElement("div", {
-        className: "lds-dual-ring-after",
-        style: {
-          borderColor: "".concat(this.props.color, " transparent")
-        }
-      }));
+import React from 'react';
+import './style.css';
+export default function DualRing(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    className: "lds-dual-ring ".concat(className),
+    style: _objectSpread({}, style)
+  }, React.createElement("div", {
+    className: "lds-dual-ring-after",
+    style: {
+      borderColor: "".concat(color, " transparent")
     }
-  }]);
-
-  return DualRing;
-}(Component);
-
-export { DualRing as default };
+  }));
+}
 DualRing.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Ellipsis/index.js

@@ -1,60 +0,33 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-var Ellipsis =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Ellipsis, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Ellipsis() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Ellipsis(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Ellipsis);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Ellipsis)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.Circles = function () {
-      var div = [];
-
-      for (var index = 0; index < 4; index++) {
-        div.push(React.createElement("div", {
-          key: index,
-          style: {
-            background: "".concat(_this.props.color)
-          }
-        }));
+  var circles = _toConsumableArray(Array(4)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index,
+      style: {
+        background: "".concat(color)
       }
+    });
+  });
 
-      return div;
-    };
-
-    return _this;
-  }
-
-  _createClass(Ellipsis, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-ellipsis"
-      }, this.Circles());
-    }
-  }]);
-
-  return Ellipsis;
-}(Component);
-
-export { Ellipsis as default };
+  return React.createElement("div", {
+    className: "lds-ellipsis ".concat(className),
+    style: _objectSpread({}, style)
+  }, circles);
+}
 Ellipsis.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Facebook/index.js

@@ -0,57 +1,33 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
 
-var Facebook =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Facebook, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Facebook() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Facebook(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Facebook);
+  var circles = _toConsumableArray(Array(3)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index,
+      style: {
+        background: "".concat(color)
+      }
+    });
+  });
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Facebook)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.getCircles = function () {
-      return _toConsumableArray(Array(3)).map(function (val, index) {
-        return React.createElement("div", {
-          key: index,
-          style: {
-            background: "".concat(_this.props.color)
-          }
-        });
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(Facebook, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-facebook"
-      }, this.getCircles());
-    }
-  }]);
-
-  return Facebook;
-}(Component);
-
-export { Facebook as default };
+  return React.createElement("div", {
+    className: "lds-facebook ".concat(className),
+    style: _objectSpread({}, style)
+  }, circles);
+}
 Facebook.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Grid/index.js

@@ -0,6 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import React from 'react';
 import './style.css';
 export default function Grid(_ref) {
-  var color = _ref.color;
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
@@ -17,7 +25,10 @@ var circles = _toConsumableArray(Array(9)).map(function (_, index) {
   return React.createElement("div", {
-    className: "lds-grid"
+    className: "lds-grid ".concat(className),
+    style: _objectSpread({}, style)
   }, circles);
 }
 Grid.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Heart/index.js

@@ -1,49 +0,36 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var Heart =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Heart, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Heart() {
-    _classCallCheck(this, Heart);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Heart).apply(this, arguments));
-  }
-
-  _createClass(Heart, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-heart"
-      }, React.createElement("div", {
-        style: {
-          background: this.props.color
-        }
-      }, React.createElement("div", {
-        className: "div-before",
-        style: {
-          background: this.props.color
-        }
-      }), React.createElement("div", {
-        className: "div-after",
-        style: {
-          background: this.props.color
-        }
-      })));
+import React from 'react';
+import './style.css';
+export default function Heart(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    className: "lds-heart ".concat(className),
+    style: _objectSpread({}, style)
+  }, React.createElement("div", {
+    style: {
+      background: color
     }
-  }]);
-
-  return Heart;
-}(Component);
-
-export { Heart as default };
+  }, React.createElement("div", {
+    className: "div-before",
+    style: {
+      background: color
+    }
+  }), React.createElement("div", {
+    className: "div-after",
+    style: {
+      background: color
+    }
+  })));
+}
 Heart.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Hourglass/index.js

@@ -1,40 +0,27 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var Hourglass =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Hourglass, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Hourglass() {
-    _classCallCheck(this, Hourglass);
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(Hourglass).apply(this, arguments));
-  }
-
-  _createClass(Hourglass, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-hourglass"
-      }, React.createElement("div", {
-        className: "lds-hourglass-after",
-        style: {
-          background: this.props.color
-        }
-      }));
+import React from 'react';
+import './style.css';
+export default function Hourglass(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
+  return React.createElement("div", {
+    className: "lds-hourglass ".concat(className),
+    style: _objectSpread({}, style)
+  }, React.createElement("div", {
+    className: "lds-hourglass-after",
+    style: {
+      background: color
     }
-  }]);
-
-  return Hourglass;
-}(Component);
-
-export { Hourglass as default };
+  }));
+}
 Hourglass.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Ring/index.js

@@ -1,73 +0,42 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-var Ring =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Ring, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Ring() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Ring(_ref) {
+  var color = _ref.color,
+      size = _ref.size,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Ring);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Ring)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.Circles = function () {
-      var _this$props = _this.props,
-          color = _this$props.color,
-          size = _this$props.size;
-      var div = [];
-
-      for (var index = 0; index < 4; index++) {
-        div.push(React.createElement("div", {
-          key: index,
-          style: {
-            borderColor: "".concat(color, " transparent transparent transparent"),
-            width: size * 0.8,
-            height: size * 0.8,
-            margin: size * 0.1,
-            borderWidth: size * 0.1
-          }
-        }));
+  var circles = _toConsumableArray(Array(4)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index,
+      style: {
+        borderColor: "".concat(color, " transparent transparent transparent"),
+        width: size * 0.8,
+        height: size * 0.8,
+        margin: size * 0.1,
+        borderWidth: size * 0.1
       }
+    });
+  });
 
-      return div;
-    };
-
-    return _this;
-  }
-
-  _createClass(Ring, [{
-    key: "render",
-    value: function render() {
-      var size = this.props.size;
-      return React.createElement("div", {
-        className: "lds-ring",
-        style: {
-          width: size,
-          height: size
-        }
-      }, this.Circles());
-    }
-  }]);
-
-  return Ring;
-}(Component);
-
-export { Ring as default };
+  return React.createElement("div", {
+    className: "lds-ring ".concat(className),
+    style: _objectSpread({
+      width: size,
+      height: size
+    }, style)
+  }, circles);
+}
 Ring.defaultProps = {
   color: '#7f58af',
-  size: 80
+  size: 80,
+  className: '',
+  style: {}
 };

dist/Ripple/index.js

@@ -1,60 +0,33 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-var Ripple =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Ripple, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Ripple() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Ripple(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Ripple);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Ripple)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.Circles = function () {
-      var div = [];
-
-      for (var index = 0; index < 2; index++) {
-        div.push(React.createElement("div", {
-          key: index,
-          style: {
-            borderColor: "".concat(_this.props.color)
-          }
-        }));
+  var circles = _toConsumableArray(Array(2)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index,
+      style: {
+        borderColor: "".concat(color)
       }
+    });
+  });
 
-      return div;
-    };
-
-    return _this;
-  }
-
-  _createClass(Ripple, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-ripple"
-      }, this.Circles());
-    }
-  }]);
-
-  return Ripple;
-}(Component);
-
-export { Ripple as default };
+  return React.createElement("div", {
+    className: "lds-ripple ".concat(className),
+    style: _objectSpread({}, style)
+  }, circles);
+}
 Ripple.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Roller/index.js

@@ -1,62 +0,35 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-var Roller =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Roller, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Roller() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Roller(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Roller);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Roller)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.Circles = function () {
-      var div = [];
-
-      for (var index = 0; index < 8; index++) {
-        div.push(React.createElement("div", {
-          key: index
-        }, React.createElement("div", {
-          className: "div-after",
-          style: {
-            background: _this.props.color
-          }
-        })));
+  var circles = _toConsumableArray(Array(8)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index
+    }, React.createElement("div", {
+      className: "div-after",
+      style: {
+        background: color
       }
+    }));
+  });
 
-      return div;
-    };
-
-    return _this;
-  }
-
-  _createClass(Roller, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-roller"
-      }, this.Circles());
-    }
-  }]);
-
-  return Roller;
-}(Component);
-
-export { Roller as default };
+  return React.createElement("div", {
+    className: "lds-roller ".concat(className),
+    style: _objectSpread({}, style)
+  }, circles);
+}
 Roller.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

dist/Spinner/index.js

@@ -1,62 +0,35 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import React, { Component } from 'react';
-import './style.css';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
-var Spinner =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(Spinner, _Component);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-  function Spinner() {
-    var _getPrototypeOf2;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-    var _this;
+import React from 'react';
+import './style.css';
+export default function Spinner(_ref) {
+  var color = _ref.color,
+      className = _ref.className,
+      style = _ref.style;
 
-    _classCallCheck(this, Spinner);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Spinner)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.Circles = function () {
-      var div = [];
-
-      for (var index = 0; index < 12; index++) {
-        div.push(React.createElement("div", {
-          key: index
-        }, React.createElement("div", {
-          className: "div-after",
-          style: {
-            background: _this.props.color
-          }
-        })));
+  var circles = _toConsumableArray(Array(12)).map(function (_, index) {
+    return React.createElement("div", {
+      key: index
+    }, React.createElement("div", {
+      className: "div-after",
+      style: {
+        background: color
       }
+    }));
+  });
 
-      return div;
-    };
-
-    return _this;
-  }
-
-  _createClass(Spinner, [{
-    key: "render",
-    value: function render() {
-      return React.createElement("div", {
-        className: "lds-spinner"
-      }, this.Circles());
-    }
-  }]);
-
-  return Spinner;
-}(Component);
-
-export { Spinner as default };
+  return React.createElement("div", {
+    className: "lds-spinner ".concat(className),
+    style: _objectSpread({}, style)
+  }, circles);
+}
 Spinner.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  className: '',
+  style: {}
 };

package.json

 {
   "name": "react-spinners-css",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "private": false,
@@ -38,3 +38,3 @@ "main": "dist/index.js",
     "start": "react-scripts start",
-    "build": "rm -rf dist && NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
+    "build:lib": "rm -rf dist && NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
     "build:bit": "rm -rf dist && bit build",
@@ -41,0 +41,0 @@ "test": "react-scripts test",

README.md

@@ -30,16 +30,16 @@ # React Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
 
-| Spinner          | Color: string | Size: number  |
-| ---------------- | ------------  | ------------- |
-| Circle Spinner   | `#7f58af`     | `64px`        |
-| Default Spinner  | `#7f58af`     | -             |
-| DualRing Spinner | `#7f58af`     | -             |
-| Ellipsis Spinner | `#7f58af`     | -             |
-| Facebook Spinner | `#7f58af`     | -             |
-| Grid Spinner     | `#7f58af`     | -             |
-| Heart Spinner    | `#7f58af`     | -             |
-| Hourglass Spinner| `#7f58af`     | -             |
-| Ring Spinner     | `#7f58af`     | `80px`        |
-| Ripple Spinner   | `#7f58af`     | -             |
-| Roller Spinner   | `#7f58af`     | -             |
-| Spinner Spinner  | `#7f58af`     | -             |
+| Spinner          | color: string | size: number  | className: string | style: object |
+| ---------------- | ------------  | ------------- | ----------------- | ------------- |
+| Circle Spinner   | `#7f58af`     | `64px`        | `""`              | `{}`          |
+| Default Spinner  | `#7f58af`     | -             | `""`              | `{}`          |
+| DualRing Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Ellipsis Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Facebook Spinner | `#7f58af`     | -             | `""`              | `{}`          |
+| Grid Spinner     | `#7f58af`     | -             | `""`              | `{}`          |
+| Heart Spinner    | `#7f58af`     | -             | `""`              | `{}`          |
+| Hourglass Spinner| `#7f58af`     | -             | `""`              | `{}`          |
+| Ring Spinner     | `#7f58af`     | `80px`        | `""`              | `{}`          |
+| Ripple Spinner   | `#7f58af`     | -             | `""`              | `{}`          |
+| Roller Spinner   | `#7f58af`     | -             | `""`              | `{}`          |
+| Spinner Spinner  | `#7f58af`     | -             | `""`              | `{}`          |
 
@@ -46,0 +46,0 @@

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39279

increased by11.56%

Worsened metrics

Lines of code

950

decreased by-11.21%

No dependency changes