react-skeleton-image - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");const n=n=>e.createElement("svg",{viewBox:"0 0 15 15",fill:"none",width:"40",height:"40",...n},e.createElement("path",{d:"M2.5 1h10A1.5 1.5 0 0 1 14 2.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 12.5v-10A1.5 1.5 0 0 1 2.5 1Zm0 1a.5.5 0 0 0-.5.5v5.864l1.682-1.682a.45.45 0 0 1 .647.01l3.545 3.798 2.808-2.808a.45.45 0 0 1 .636 0L13 9.364V2.5a.5.5 0 0 0-.5-.5h-10ZM2 12.5V9.636l1.989-1.988 3.542 3.794L8.941 13H2.5a.5.5 0 0 1-.5-.5Zm10.5.5h-2.345l-1.672-1.847L11 8.636l2 2V12.5a.5.5 0 0 1-.5.5ZM6.65 5.5a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0Zm.85-1.75a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z",fill:"#868E96",fillRule:"evenodd",clipRule:"evenodd"}));!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".block {\n  display: block;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.skeleton {\n  background: hsl(200, 15%, 70%);\n  animation: skeleton-loading 0.7s linear infinite alternate;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.fallback {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    opacity: 0.5;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n");exports.Image=t=>{const[l,i]=e.useState(!1),[a,o]=e.useState(!1),s=e.useRef(null),{skeleton:c=!0,skeletonClassName:d="",className:r="",width:h="",height:m="",style:f={},onClick:u,inline:g,...k}=t,y=l?g?"inline-block":"block":"hidden";return a?e.createElement("div",{className:"fallback",onClick:u,style:{width:h,height:m}},e.createElement(n,null)):e.createElement(e.Fragment,null,e.createElement("img",{ref:s,...k,alt:k.alt,onClick:u,onLoad:()=>i(!0),onError:()=>o(!0),className:`image ${c?y:""} ${r}`,style:{width:h,height:m,...f}}),c&&!l&&!a&&e.createElement("div",{className:`skeleton ${d}`,onClick:u,style:{width:h,height:m}}))};
+"use strict";var e=require("react");const n=n=>e.createElement("svg",{viewBox:"0 0 15 15",fill:"none",width:"40",height:"40",...n},e.createElement("path",{d:"M2.5 1h10A1.5 1.5 0 0 1 14 2.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 12.5v-10A1.5 1.5 0 0 1 2.5 1Zm0 1a.5.5 0 0 0-.5.5v5.864l1.682-1.682a.45.45 0 0 1 .647.01l3.545 3.798 2.808-2.808a.45.45 0 0 1 .636 0L13 9.364V2.5a.5.5 0 0 0-.5-.5h-10ZM2 12.5V9.636l1.989-1.988 3.542 3.794L8.941 13H2.5a.5.5 0 0 1-.5-.5Zm10.5.5h-2.345l-1.672-1.847L11 8.636l2 2V12.5a.5.5 0 0 1-.5.5ZM6.65 5.5a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0Zm.85-1.75a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z",fill:"#868E96",fillRule:"evenodd",clipRule:"evenodd"}));!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".block {\n  display: block;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.skeleton {\n  background: hsl(201, 15%, 82%);\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0,\n    rgba(255, 255, 255, 0.2) 20%,\n    rgba(255, 255, 255, 0.5) 60%,\n    rgba(255, 255, 255, 0)\n  );\n  animation: shimmer 2s infinite;\n  content: '';\n}\n\n.fallback {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n");exports.Image=t=>{const[l,a]=e.useState(!1),[i,s]=e.useState(!1),o=e.useRef(null),{skeleton:r=!0,skeletonClassName:c="",className:d="",width:h="",height:m="",style:g={},onClick:f,inline:u,...k}=t,b=l?u?"inline-block":"block":"hidden";return i?e.createElement("div",{className:"fallback",onClick:f,style:{width:h,height:m}},e.createElement(n,null)):e.createElement(e.Fragment,null,e.createElement("img",{ref:o,...k,alt:k.alt,onClick:f,onLoad:()=>a(!0),onError:()=>s(!0),className:`image ${r?b:""} ${d}`,style:{width:h,height:m,...g}}),r&&!l&&!i&&e.createElement("div",{className:`skeleton ${c}`,onClick:f,style:{width:h,height:m}}))};
 //# sourceMappingURL=index.cjs.js.map

dist/index.esm.js

@@ -1,2 +0,2 @@
-import e,{useState as n,useRef as t}from"react";const l=n=>e.createElement("svg",{viewBox:"0 0 15 15",fill:"none",width:"40",height:"40",...n},e.createElement("path",{d:"M2.5 1h10A1.5 1.5 0 0 1 14 2.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 12.5v-10A1.5 1.5 0 0 1 2.5 1Zm0 1a.5.5 0 0 0-.5.5v5.864l1.682-1.682a.45.45 0 0 1 .647.01l3.545 3.798 2.808-2.808a.45.45 0 0 1 .636 0L13 9.364V2.5a.5.5 0 0 0-.5-.5h-10ZM2 12.5V9.636l1.989-1.988 3.542 3.794L8.941 13H2.5a.5.5 0 0 1-.5-.5Zm10.5.5h-2.345l-1.672-1.847L11 8.636l2 2V12.5a.5.5 0 0 1-.5.5ZM6.65 5.5a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0Zm.85-1.75a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z",fill:"#868E96",fillRule:"evenodd",clipRule:"evenodd"}));!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".block {\n  display: block;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.skeleton {\n  background: hsl(200, 15%, 70%);\n  animation: skeleton-loading 0.7s linear infinite alternate;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.fallback {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n@keyframes skeleton-loading {\n  0% {\n    opacity: 0.5;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n");const i=i=>{const[a,o]=n(!1),[c,d]=n(!1),s=t(null),{skeleton:h=!0,skeletonClassName:r="",className:m="",width:f="",height:k="",style:g={},onClick:p,inline:y,...u}=i,b=a?y?"inline-block":"block":"hidden";return c?e.createElement("div",{className:"fallback",onClick:p,style:{width:f,height:k}},e.createElement(l,null)):e.createElement(e.Fragment,null,e.createElement("img",{ref:s,...u,alt:u.alt,onClick:p,onLoad:()=>o(!0),onError:()=>d(!0),className:`image ${h?b:""} ${m}`,style:{width:f,height:k,...g}}),h&&!a&&!c&&e.createElement("div",{className:`skeleton ${r}`,onClick:p,style:{width:f,height:k}}))};export{i as Image};
+import e,{useState as n,useRef as t}from"react";const l=n=>e.createElement("svg",{viewBox:"0 0 15 15",fill:"none",width:"40",height:"40",...n},e.createElement("path",{d:"M2.5 1h10A1.5 1.5 0 0 1 14 2.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 1 12.5v-10A1.5 1.5 0 0 1 2.5 1Zm0 1a.5.5 0 0 0-.5.5v5.864l1.682-1.682a.45.45 0 0 1 .647.01l3.545 3.798 2.808-2.808a.45.45 0 0 1 .636 0L13 9.364V2.5a.5.5 0 0 0-.5-.5h-10ZM2 12.5V9.636l1.989-1.988 3.542 3.794L8.941 13H2.5a.5.5 0 0 1-.5-.5Zm10.5.5h-2.345l-1.672-1.847L11 8.636l2 2V12.5a.5.5 0 0 1-.5.5ZM6.65 5.5a.85.85 0 1 1 1.7 0 .85.85 0 0 1-1.7 0Zm.85-1.75a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z",fill:"#868E96",fillRule:"evenodd",clipRule:"evenodd"}));!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".block {\n  display: block;\n}\n\n.hidden {\n  display: none;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.skeleton {\n  background: hsl(201, 15%, 82%);\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0,\n    rgba(255, 255, 255, 0.2) 20%,\n    rgba(255, 255, 255, 0.5) 60%,\n    rgba(255, 255, 255, 0)\n  );\n  animation: shimmer 2s infinite;\n  content: '';\n}\n\n.fallback {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  background: #f8f9fa;\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n");const i=i=>{const[a,o]=n(!1),[r,s]=n(!1),c=t(null),{skeleton:d=!0,skeletonClassName:h="",className:m="",width:g="",height:f="",style:k={},onClick:b,inline:u,...p}=i,y=a?u?"inline-block":"block":"hidden";return r?e.createElement("div",{className:"fallback",onClick:b,style:{width:g,height:f}},e.createElement(l,null)):e.createElement(e.Fragment,null,e.createElement("img",{ref:c,...p,alt:p.alt,onClick:b,onLoad:()=>o(!0),onError:()=>s(!0),className:`image ${d?y:""} ${m}`,style:{width:g,height:f,...k}}),d&&!a&&!r&&e.createElement("div",{className:`skeleton ${h}`,onClick:b,style:{width:g,height:f}}))};export{i as Image};
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "react-skeleton-image",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A skeleton image component which handles an image's loading and error states.",
@@ -29,2 +29,3 @@ "main": "dist/index.cjs.js",
   "devDependencies": {
+    "@changesets/cli": "^2.26.1",
     "@rollup/plugin-commonjs": "^24.0.1",
@@ -31,0 +32,0 @@ "@rollup/plugin-node-resolve": "^15.0.1",

New alerts

Unpublished package

Supply chain risk

Package version was not found on the registry. It may exist on a different registry and need to be configured to pull from that registry.

Found 1 instance in 1 package

Fixed alerts

Unpopular package

Quality

This package is not very popular.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15522

increased by3.95%

Lines of code

38

increased by5.56%

Number of medium quality alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

20

increased by5.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes