react-spinners-css - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/Circle/index.js

@@ -23,6 +23,11 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     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: this.props.color
+          background: color,
+          width: size,
+          height: size
         }
@@ -38,3 +43,4 @@ });
 Circle.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  size: 64
 };

dist/Circle/style.css

 .lds-circle {
     display: inline-block;
-    width: 64px;
-    height: 64px;
     margin: 8px;
@@ -6,0 +4,0 @@ border-radius: 50%;

dist/Default/index.js

@@ -32,2 +32,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         div.push(React.createElement("div", {
+          key: index,
           style: {
@@ -34,0 +35,0 @@ background: "".concat(_this.props.color)

dist/Ellipsis/index.js

@@ -32,2 +32,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         div.push(React.createElement("div", {
+          key: index,
           style: {
@@ -34,0 +35,0 @@ background: "".concat(_this.props.color)

dist/Facebook/index.js

@@ -38,4 +38,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     _this.getCircles = function () {
-      return createArray(3).map(function () {
+      return createArray(3).map(function (val, index) {
         return React.createElement("div", {
+          key: index,
           style: {
@@ -42,0 +43,0 @@ background: "".concat(_this.props.color)

dist/Grid/index.js

@@ -32,2 +32,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         div.push(React.createElement("div", {
+          key: index,
           style: {
@@ -34,0 +35,0 @@ background: "".concat(_this.props.color)

dist/Ring/index.js

@@ -28,2 +28,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     _this.Circles = function () {
+      var _this$props = _this.props,
+          color = _this$props.color,
+          size = _this$props.size;
       var div = [];
@@ -33,4 +36,9 @@
         div.push(React.createElement("div", {
+          key: index,
           style: {
-            borderColor: "".concat(_this.props.color, " transparent transparent transparent")
+            borderColor: "".concat(color, " transparent transparent transparent"),
+            width: size * 0.8,
+            height: size * 0.8,
+            margin: size * 0.1,
+            borderWidth: size * 0.1
           }
@@ -49,4 +57,9 @@ }));
     value: function render() {
+      var size = this.props.size;
       return React.createElement("div", {
-        className: "lds-ring"
+        className: "lds-ring",
+        style: {
+          width: size,
+          height: size
+        }
       }, this.Circles());
@@ -61,3 +74,4 @@ }
 Ring.defaultProps = {
-  color: '#7f58af'
+  color: '#7f58af',
+  size: 80
 };

dist/Ring/style.css

 .lds-ring {
     display: inline-block;
     position: relative;
-    width: 80px;
-    height: 80px;
   }
@@ -11,5 +9,2 @@ .lds-ring div {
     position: absolute;
-    width: 64px;
-    height: 64px;
-    margin: 8px;
     border: 8px solid #fff;
@@ -16,0 +11,0 @@ border-radius: 50%;

dist/Ripple/index.js

@@ -32,2 +32,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
         div.push(React.createElement("div", {
+          key: index,
           style: {
@@ -34,0 +35,0 @@ borderColor: "".concat(_this.props.color)

dist/Roller/index.js

@@ -31,3 +31,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
       for (var index = 0; index < 8; index++) {
-        div.push(React.createElement("div", null, React.createElement("div", {
+        div.push(React.createElement("div", {
+          key: index
+        }, React.createElement("div", {
           className: "div-after",
@@ -34,0 +36,0 @@ style: {

dist/Spinner/index.js

@@ -31,3 +31,5 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
       for (var index = 0; index < 12; index++) {
-        div.push(React.createElement("div", null, React.createElement("div", {
+        div.push(React.createElement("div", {
+          key: index
+        }, React.createElement("div", {
           className: "div-after",
@@ -34,0 +36,0 @@ style: {

package.json

 {
   "name": "react-spinners-css",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": false,
@@ -39,5 +39,8 @@ "main": "dist/index.js",
     "build": "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",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\""
+    "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
+    "deploy:npm": "npm publish",
+    "deploy:bit": "bit export joshk.react-spinners-css"
   },
@@ -44,0 +47,0 @@ "eslintConfig": {

README.md

@@ -14,22 +14,23 @@ # React Spinners CSS Loaders ([Angular](https://github.com/JoshK2/ng-spinners))
   
-## 🚀 List of components
+## 🚀 List of Spinners - PropTypes and Default Props
 
-- `<Circle />`
-- `<Default />`
-- `<DualRing />`
-- `<Ellipsis />`
-- `<Facebook />`
-- `<Grid />`
-- `<Heart />`
-- `<Hourglass />`
-- `<Ring />`
-- `<Ripple />`
-- `<Roller />`  
-- `<Spinner />`
+Each component accepts a `color` prop, and few accepts also `size` prop.  
+The default `color` prop is `#7f58af`.  
+Component that accepts `size` prop have a default size in pixel.
 
-#### Props
+| 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`     | -             |
 
-| Prop    | Type     | Default |
-| ------- | -------- | ------- |
-| `color` | `string` | `#7f58af`  |
 
@@ -36,0 +37,0 @@ ## 📦 Installation

No alert changes

Improved metrics

Total package byte prevSize

36826

3.85%

Lines of code

1130

1.99%

Number of lines in readme file

93

1.09%

No dependency changes