react-loading-skeleton - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/bundle.js

@@ -138,3 +138,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
                     'span',
-                    { key: i, className: 'react-loading-skeleton' },
+                    { key: i, className: 'react-loading-skeleton', style: { animation: "progress " + String(this.props.duration) + "s ease-in-out infinite" } },
                     '\u200C'
@@ -165,3 +165,4 @@ ));
     count: 1,
-    wrapper: null
+    wrapper: null,
+    duration: 1.2
 };
@@ -257,3 +258,3 @@ exports.default = Skeleton;
 // module
-exports.push([module.i, "@keyframes progress {\n    0% {\n        background-position: -200px 0;\n    }\n    100% {\n        background-position: calc(200px + 100%) 0;\n    }\n}\n\n.react-loading-skeleton {\n    animation: progress 1.2s ease-in-out infinite;\n    background-color: #eee;\n    background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n    background-size: 200px 100%;\n    background-repeat: no-repeat;\n    border-radius: 4px;\n    display: inline-block;\n    line-height: 1;\n    width: 100%;\n}", ""]);
+exports.push([module.i, "@keyframes progress {\n    0% {\n        background-position: -200px 0;\n    }\n    100% {\n        background-position: calc(200px + 100%) 0;\n    }\n}\n\n.react-loading-skeleton {\n    /* animation: progress 1.2s ease-in-out infinite; */\n    background-color: #eee;\n    background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n    background-size: 200px 100%;\n    background-repeat: no-repeat;\n    border-radius: 4px;\n    display: inline-block;\n    line-height: 1;\n    width: 100%;\n}", ""]);
 
@@ -260,0 +261,0 @@ // exports

package.json

 {
   "name": "react-loading-skeleton",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "license": "MIT",
@@ -14,6 +14,13 @@ "author": "David Tang",
     "start": "npm run storybook",
+    "test": "jest",
     "build": "webpack",
-    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybook": "start-storybook -p 8080 -c .storybook",
     "prepublishOnly": "npm run build"
   },
+  "jest": {
+    "setupFiles": ["<rootDir>/testSetup/testSetup.js"],
+    "moduleNameMapper": {
+      "\\.css$": "<rootDir>/testSetup/cssMock.js"
+    }
+  },
   "dependencies": {},
@@ -31,5 +38,9 @@ "peerDependencies": {
     "css-loader": "^0.28.4",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "jest": "^21.2.1",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
     "style-loader": "^0.18.2",
@@ -36,0 +47,0 @@ "webpack": "^2.6.1",

README.md

@@ -71,2 +71,19 @@ # react-loading-skeleton
 </SkeletonTheme>
-```
+```
+## Duration
+
+```javascript
+class Blogpost extends Component {
+    render() {
+        return (
+            <div>
+                <h1>{this.props.title || <Skeleton duration={2}/>}</h1>
+            </div>
+        );
+    }
+}
+```
+
+`duration`: Number, defaults to 1.2
+
+Duration is how long it takes do one cycle of the skeleton animation.

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

31074

increased by2.32%

Lines of code

675

increased by0.15%

Number of lines in readme file

89

increased by25.35%

Worsened metrics

Dev dependency count

17

increased by30.77%

Number of package files

4

decreased by-20%

No dependency changes