react-skeleton-loader - npm Package Compare versions

Comparing version 0.1.6 to 1.0.0

CHANGELOG.md

@@ -0,4 +1,10 @@
+# 1.0.0 (2018-02-08)
+  - Major release
+  - Add readme
+  - Add stories
+  - rename `backgroundColor` prop to `color`
+
 # 0.1.6 (2018-02-08)
   - Add animations
-  
+
 # 0.1.5 (2018-02-08)
@@ -5,0 +11,0 @@ - Fix main path

dist/Skeleton.js

@@ -108,3 +108,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   var borderRadius = props.borderRadius,
-      backgroundColor = props.backgroundColor;
+      color = props.color;
 
@@ -125,3 +125,3 @@ var elements = [];
           borderRadius: borderRadius,
-          backgroundColor: backgroundColor
+          backgroundColor: color
         }
@@ -149,3 +149,3 @@ },
   borderRadius: '8px',
-  backgroundColor: '#EFF1F6',
+  color: '#EFF1F6',
   count: 1,
@@ -152,0 +152,0 @@ animated: true

dist/Skeleton.min.js

@@ -1,1 +0,1 @@
-!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react")):"function"==typeof define&&define.amd?define(["react"],factory):"object"==typeof exports?exports.Skeleton=factory(require("react")):root.Skeleton=factory(root._)}("undefined"!=typeof self?self:this,function(__WEBPACK_EXTERNAL_MODULE_7__){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=0)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),__webpack_require__(2);var obj,_react=__webpack_require__(7),_react2=(obj=_react)&&obj.__esModule?obj:{default:obj};var Skeleton=function(props){for(var w=parseFloat(props.width),h=parseFloat(props.height),wm=props.width.toString().replace(/\d+/g,""),hm=props.height.toString().replace(/\d+/g,""),borderRadius=props.borderRadius,backgroundColor=props.backgroundColor,elements=[],i=0;i<props.count;i++){var _width=""+(w-Math.random()*w*props.widthRandomness)+wm,_height=""+(h-Math.random()*h*props.heightRandomness)+hm;elements.push(_react2.default.createElement("span",{className:"react-skeleton-load "+(props.animated?"animated":""),key:i,style:{width:_width,height:_height,borderRadius:borderRadius,backgroundColor:backgroundColor}},"‌")),i!==props.count-1&&elements.push(_react2.default.createElement("br",null))}return _react2.default.createElement("span",null,elements)};Skeleton.defaultProps={width:"150px",height:"100%",widthRandomness:.25,heightRandomness:0,borderRadius:"8px",backgroundColor:"#EFF1F6",count:1,animated:!0},exports.default=Skeleton},function(module,exports,__webpack_require__){var content=__webpack_require__(3);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(5)(content,options);content.locals&&(module.exports=content.locals)},function(module,exports,__webpack_require__){(module.exports=__webpack_require__(4)(!1)).push([module.i,".react-skeleton-load {\n  line-height: 1;\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n\n.react-skeleton-load.animated::before {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 500px;\n  top: 0;\n  left: -500px;\n  background-image: linear-gradient(90deg, rgba(255,255,255, 0), rgba(255,255,255, 0.6), rgba(255,255,255, 0));\n  animation: progress 1.2s ease-in-out infinite\n}\n\n@keyframes progress {\n  0% {\n    left: -500px\n  }\n  100% {\n    left: 100%\n  }\n}",""])},function(module,exports){module.exports=function(useSourceMap){var list=[];return list.toString=function(){return this.map(function(item){var content=function(item,useSourceMap){var content=item[1]||"",cssMapping=item[3];if(!cssMapping)return content;if(useSourceMap&&"function"==typeof btoa){var sourceMapping=(sourceMap=cssMapping,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))+" */"),sourceURLs=cssMapping.sources.map(function(source){return"/*# sourceURL="+cssMapping.sourceRoot+source+" */"});return[content].concat(sourceURLs).concat([sourceMapping]).join("\n")}var sourceMap;return[content].join("\n")}(item,useSourceMap);return item[2]?"@media "+item[2]+"{"+content+"}":content}).join("")},list.i=function(modules,mediaQuery){"string"==typeof modules&&(modules=[[null,modules,""]]);for(var alreadyImportedModules={},i=0;i<this.length;i++){var id=this[i][0];"number"==typeof id&&(alreadyImportedModules[id]=!0)}for(i=0;i<modules.length;i++){var item=modules[i];"number"==typeof item[0]&&alreadyImportedModules[item[0]]||(mediaQuery&&!item[2]?item[2]=mediaQuery:mediaQuery&&(item[2]="("+item[2]+") and ("+mediaQuery+")"),list.push(item))}},list}},function(module,exports,__webpack_require__){var fn,memo,stylesInDom={},isOldIE=(fn=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===memo&&(memo=fn.apply(this,arguments)),memo}),getElement=function(fn){var memo={};return function(target){if("function"==typeof target)return target();if(void 0===memo[target]){var styleTarget=function(target){return document.querySelector(target)}.call(this,target);if(window.HTMLIFrameElement&&styleTarget instanceof window.HTMLIFrameElement)try{styleTarget=styleTarget.contentDocument.head}catch(e){styleTarget=null}memo[target]=styleTarget}return memo[target]}}(),singleton=null,singletonCounter=0,stylesInsertedAtTop=[],fixUrls=__webpack_require__(6);function addStylesToDom(styles,options){for(var i=0;i<styles.length;i++){var item=styles[i],domStyle=stylesInDom[item.id];if(domStyle){domStyle.refs++;for(var j=0;j<domStyle.parts.length;j++)domStyle.parts[j](item.parts[j]);for(;j<item.parts.length;j++)domStyle.parts.push(addStyle(item.parts[j],options))}else{var parts=[];for(j=0;j<item.parts.length;j++)parts.push(addStyle(item.parts[j],options));stylesInDom[item.id]={id:item.id,refs:1,parts:parts}}}}function listToStyles(list,options){for(var styles=[],newStyles={},i=0;i<list.length;i++){var item=list[i],id=options.base?item[0]+options.base:item[0],part={css:item[1],media:item[2],sourceMap:item[3]};newStyles[id]?newStyles[id].parts.push(part):styles.push(newStyles[id]={id:id,parts:[part]})}return styles}function insertStyleElement(options,style){var target=getElement(options.insertInto);if(!target)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var lastStyleElementInsertedAtTop=stylesInsertedAtTop[stylesInsertedAtTop.length-1];if("top"===options.insertAt)lastStyleElementInsertedAtTop?lastStyleElementInsertedAtTop.nextSibling?target.insertBefore(style,lastStyleElementInsertedAtTop.nextSibling):target.appendChild(style):target.insertBefore(style,target.firstChild),stylesInsertedAtTop.push(style);else if("bottom"===options.insertAt)target.appendChild(style);else{if("object"!=typeof options.insertAt||!options.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var nextSibling=getElement(options.insertInto+" "+options.insertAt.before);target.insertBefore(style,nextSibling)}}function removeStyleElement(style){if(null===style.parentNode)return!1;style.parentNode.removeChild(style);var idx=stylesInsertedAtTop.indexOf(style);idx>=0&&stylesInsertedAtTop.splice(idx,1)}function createStyleElement(options){var style=document.createElement("style");return options.attrs.type="text/css",addAttrs(style,options.attrs),insertStyleElement(options,style),style}function addAttrs(el,attrs){Object.keys(attrs).forEach(function(key){el.setAttribute(key,attrs[key])})}function addStyle(obj,options){var style,update,remove,result;if(options.transform&&obj.css){if(!(result=options.transform(obj.css)))return function(){};obj.css=result}if(options.singleton){var styleIndex=singletonCounter++;style=singleton||(singleton=createStyleElement(options)),update=applyToSingletonTag.bind(null,style,styleIndex,!1),remove=applyToSingletonTag.bind(null,style,styleIndex,!0)}else obj.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(style=function(options){var link=document.createElement("link");return options.attrs.type="text/css",options.attrs.rel="stylesheet",addAttrs(link,options.attrs),insertStyleElement(options,link),link}(options),update=function(link,options,obj){var css=obj.css,sourceMap=obj.sourceMap,autoFixUrls=void 0===options.convertToAbsoluteUrls&&sourceMap;(options.convertToAbsoluteUrls||autoFixUrls)&&(css=fixUrls(css));sourceMap&&(css+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))+" */");var blob=new Blob([css],{type:"text/css"}),oldSrc=link.href;link.href=URL.createObjectURL(blob),oldSrc&&URL.revokeObjectURL(oldSrc)}.bind(null,style,options),remove=function(){removeStyleElement(style),style.href&&URL.revokeObjectURL(style.href)}):(style=createStyleElement(options),update=function(style,obj){var css=obj.css,media=obj.media;media&&style.setAttribute("media",media);if(style.styleSheet)style.styleSheet.cssText=css;else{for(;style.firstChild;)style.removeChild(style.firstChild);style.appendChild(document.createTextNode(css))}}.bind(null,style),remove=function(){removeStyleElement(style)});return update(obj),function(newObj){if(newObj){if(newObj.css===obj.css&&newObj.media===obj.media&&newObj.sourceMap===obj.sourceMap)return;update(obj=newObj)}else remove()}}module.exports=function(list,options){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(options=options||{}).attrs="object"==typeof options.attrs?options.attrs:{},options.singleton||"boolean"==typeof options.singleton||(options.singleton=isOldIE()),options.insertInto||(options.insertInto="head"),options.insertAt||(options.insertAt="bottom");var styles=listToStyles(list,options);return addStylesToDom(styles,options),function(newList){for(var mayRemove=[],i=0;i<styles.length;i++){var item=styles[i];(domStyle=stylesInDom[item.id]).refs--,mayRemove.push(domStyle)}newList&&addStylesToDom(listToStyles(newList,options),options);for(i=0;i<mayRemove.length;i++){var domStyle;if(0===(domStyle=mayRemove[i]).refs){for(var j=0;j<domStyle.parts.length;j++)domStyle.parts[j]();delete stylesInDom[domStyle.id]}}}};var textStore,replaceText=(textStore=[],function(index,replacement){return textStore[index]=replacement,textStore.filter(Boolean).join("\n")});function applyToSingletonTag(style,index,remove,obj){var css=remove?"":obj.css;if(style.styleSheet)style.styleSheet.cssText=replaceText(index,css);else{var cssNode=document.createTextNode(css),childNodes=style.childNodes;childNodes[index]&&style.removeChild(childNodes[index]),childNodes.length?style.insertBefore(cssNode,childNodes[index]):style.appendChild(cssNode)}}},function(module,exports){module.exports=function(css){var location="undefined"!=typeof window&&window.location;if(!location)throw new Error("fixUrls requires window.location");if(!css||"string"!=typeof css)return css;var baseUrl=location.protocol+"//"+location.host,currentDir=baseUrl+location.pathname.replace(/\/[^\/]*$/,"/");return css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(fullMatch,origUrl){var newUrl,unquotedOrigUrl=origUrl.trim().replace(/^"(.*)"$/,function(o,$1){return $1}).replace(/^'(.*)'$/,function(o,$1){return $1});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)?fullMatch:(newUrl=0===unquotedOrigUrl.indexOf("//")?unquotedOrigUrl:0===unquotedOrigUrl.indexOf("/")?baseUrl+unquotedOrigUrl:currentDir+unquotedOrigUrl.replace(/^\.\//,""),"url("+JSON.stringify(newUrl)+")")})}},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_7__}])});
+!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react")):"function"==typeof define&&define.amd?define(["react"],factory):"object"==typeof exports?exports.Skeleton=factory(require("react")):root.Skeleton=factory(root._)}("undefined"!=typeof self?self:this,function(__WEBPACK_EXTERNAL_MODULE_7__){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=0)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)},function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),__webpack_require__(2);var obj,_react=__webpack_require__(7),_react2=(obj=_react)&&obj.__esModule?obj:{default:obj};var Skeleton=function(props){for(var w=parseFloat(props.width),h=parseFloat(props.height),wm=props.width.toString().replace(/\d+/g,""),hm=props.height.toString().replace(/\d+/g,""),borderRadius=props.borderRadius,color=props.color,elements=[],i=0;i<props.count;i++){var _width=""+(w-Math.random()*w*props.widthRandomness)+wm,_height=""+(h-Math.random()*h*props.heightRandomness)+hm;elements.push(_react2.default.createElement("span",{className:"react-skeleton-load "+(props.animated?"animated":""),key:i,style:{width:_width,height:_height,borderRadius:borderRadius,backgroundColor:color}},"‌")),i!==props.count-1&&elements.push(_react2.default.createElement("br",null))}return _react2.default.createElement("span",null,elements)};Skeleton.defaultProps={width:"150px",height:"100%",widthRandomness:.25,heightRandomness:0,borderRadius:"8px",color:"#EFF1F6",count:1,animated:!0},exports.default=Skeleton},function(module,exports,__webpack_require__){var content=__webpack_require__(3);"string"==typeof content&&(content=[[module.i,content,""]]);var options={hmr:!0,transform:void 0,insertInto:void 0};__webpack_require__(5)(content,options);content.locals&&(module.exports=content.locals)},function(module,exports,__webpack_require__){(module.exports=__webpack_require__(4)(!1)).push([module.i,".react-skeleton-load {\n  line-height: 1;\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n}\n\n.react-skeleton-load.animated::before {\n  content: '';\n  position: absolute;\n  height: 100%;\n  width: 500px;\n  top: 0;\n  left: -500px;\n  background-image: linear-gradient(90deg, rgba(255,255,255, 0), rgba(255,255,255, 0.6), rgba(255,255,255, 0));\n  animation: progress 1.2s ease-in-out infinite\n}\n\n@keyframes progress {\n  0% {\n    left: -500px\n  }\n  100% {\n    left: 100%\n  }\n}",""])},function(module,exports){module.exports=function(useSourceMap){var list=[];return list.toString=function(){return this.map(function(item){var content=function(item,useSourceMap){var content=item[1]||"",cssMapping=item[3];if(!cssMapping)return content;if(useSourceMap&&"function"==typeof btoa){var sourceMapping=(sourceMap=cssMapping,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))+" */"),sourceURLs=cssMapping.sources.map(function(source){return"/*# sourceURL="+cssMapping.sourceRoot+source+" */"});return[content].concat(sourceURLs).concat([sourceMapping]).join("\n")}var sourceMap;return[content].join("\n")}(item,useSourceMap);return item[2]?"@media "+item[2]+"{"+content+"}":content}).join("")},list.i=function(modules,mediaQuery){"string"==typeof modules&&(modules=[[null,modules,""]]);for(var alreadyImportedModules={},i=0;i<this.length;i++){var id=this[i][0];"number"==typeof id&&(alreadyImportedModules[id]=!0)}for(i=0;i<modules.length;i++){var item=modules[i];"number"==typeof item[0]&&alreadyImportedModules[item[0]]||(mediaQuery&&!item[2]?item[2]=mediaQuery:mediaQuery&&(item[2]="("+item[2]+") and ("+mediaQuery+")"),list.push(item))}},list}},function(module,exports,__webpack_require__){var fn,memo,stylesInDom={},isOldIE=(fn=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===memo&&(memo=fn.apply(this,arguments)),memo}),getElement=function(fn){var memo={};return function(target){if("function"==typeof target)return target();if(void 0===memo[target]){var styleTarget=function(target){return document.querySelector(target)}.call(this,target);if(window.HTMLIFrameElement&&styleTarget instanceof window.HTMLIFrameElement)try{styleTarget=styleTarget.contentDocument.head}catch(e){styleTarget=null}memo[target]=styleTarget}return memo[target]}}(),singleton=null,singletonCounter=0,stylesInsertedAtTop=[],fixUrls=__webpack_require__(6);function addStylesToDom(styles,options){for(var i=0;i<styles.length;i++){var item=styles[i],domStyle=stylesInDom[item.id];if(domStyle){domStyle.refs++;for(var j=0;j<domStyle.parts.length;j++)domStyle.parts[j](item.parts[j]);for(;j<item.parts.length;j++)domStyle.parts.push(addStyle(item.parts[j],options))}else{var parts=[];for(j=0;j<item.parts.length;j++)parts.push(addStyle(item.parts[j],options));stylesInDom[item.id]={id:item.id,refs:1,parts:parts}}}}function listToStyles(list,options){for(var styles=[],newStyles={},i=0;i<list.length;i++){var item=list[i],id=options.base?item[0]+options.base:item[0],part={css:item[1],media:item[2],sourceMap:item[3]};newStyles[id]?newStyles[id].parts.push(part):styles.push(newStyles[id]={id:id,parts:[part]})}return styles}function insertStyleElement(options,style){var target=getElement(options.insertInto);if(!target)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var lastStyleElementInsertedAtTop=stylesInsertedAtTop[stylesInsertedAtTop.length-1];if("top"===options.insertAt)lastStyleElementInsertedAtTop?lastStyleElementInsertedAtTop.nextSibling?target.insertBefore(style,lastStyleElementInsertedAtTop.nextSibling):target.appendChild(style):target.insertBefore(style,target.firstChild),stylesInsertedAtTop.push(style);else if("bottom"===options.insertAt)target.appendChild(style);else{if("object"!=typeof options.insertAt||!options.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var nextSibling=getElement(options.insertInto+" "+options.insertAt.before);target.insertBefore(style,nextSibling)}}function removeStyleElement(style){if(null===style.parentNode)return!1;style.parentNode.removeChild(style);var idx=stylesInsertedAtTop.indexOf(style);idx>=0&&stylesInsertedAtTop.splice(idx,1)}function createStyleElement(options){var style=document.createElement("style");return options.attrs.type="text/css",addAttrs(style,options.attrs),insertStyleElement(options,style),style}function addAttrs(el,attrs){Object.keys(attrs).forEach(function(key){el.setAttribute(key,attrs[key])})}function addStyle(obj,options){var style,update,remove,result;if(options.transform&&obj.css){if(!(result=options.transform(obj.css)))return function(){};obj.css=result}if(options.singleton){var styleIndex=singletonCounter++;style=singleton||(singleton=createStyleElement(options)),update=applyToSingletonTag.bind(null,style,styleIndex,!1),remove=applyToSingletonTag.bind(null,style,styleIndex,!0)}else obj.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(style=function(options){var link=document.createElement("link");return options.attrs.type="text/css",options.attrs.rel="stylesheet",addAttrs(link,options.attrs),insertStyleElement(options,link),link}(options),update=function(link,options,obj){var css=obj.css,sourceMap=obj.sourceMap,autoFixUrls=void 0===options.convertToAbsoluteUrls&&sourceMap;(options.convertToAbsoluteUrls||autoFixUrls)&&(css=fixUrls(css));sourceMap&&(css+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))+" */");var blob=new Blob([css],{type:"text/css"}),oldSrc=link.href;link.href=URL.createObjectURL(blob),oldSrc&&URL.revokeObjectURL(oldSrc)}.bind(null,style,options),remove=function(){removeStyleElement(style),style.href&&URL.revokeObjectURL(style.href)}):(style=createStyleElement(options),update=function(style,obj){var css=obj.css,media=obj.media;media&&style.setAttribute("media",media);if(style.styleSheet)style.styleSheet.cssText=css;else{for(;style.firstChild;)style.removeChild(style.firstChild);style.appendChild(document.createTextNode(css))}}.bind(null,style),remove=function(){removeStyleElement(style)});return update(obj),function(newObj){if(newObj){if(newObj.css===obj.css&&newObj.media===obj.media&&newObj.sourceMap===obj.sourceMap)return;update(obj=newObj)}else remove()}}module.exports=function(list,options){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(options=options||{}).attrs="object"==typeof options.attrs?options.attrs:{},options.singleton||"boolean"==typeof options.singleton||(options.singleton=isOldIE()),options.insertInto||(options.insertInto="head"),options.insertAt||(options.insertAt="bottom");var styles=listToStyles(list,options);return addStylesToDom(styles,options),function(newList){for(var mayRemove=[],i=0;i<styles.length;i++){var item=styles[i];(domStyle=stylesInDom[item.id]).refs--,mayRemove.push(domStyle)}newList&&addStylesToDom(listToStyles(newList,options),options);for(i=0;i<mayRemove.length;i++){var domStyle;if(0===(domStyle=mayRemove[i]).refs){for(var j=0;j<domStyle.parts.length;j++)domStyle.parts[j]();delete stylesInDom[domStyle.id]}}}};var textStore,replaceText=(textStore=[],function(index,replacement){return textStore[index]=replacement,textStore.filter(Boolean).join("\n")});function applyToSingletonTag(style,index,remove,obj){var css=remove?"":obj.css;if(style.styleSheet)style.styleSheet.cssText=replaceText(index,css);else{var cssNode=document.createTextNode(css),childNodes=style.childNodes;childNodes[index]&&style.removeChild(childNodes[index]),childNodes.length?style.insertBefore(cssNode,childNodes[index]):style.appendChild(cssNode)}}},function(module,exports){module.exports=function(css){var location="undefined"!=typeof window&&window.location;if(!location)throw new Error("fixUrls requires window.location");if(!css||"string"!=typeof css)return css;var baseUrl=location.protocol+"//"+location.host,currentDir=baseUrl+location.pathname.replace(/\/[^\/]*$/,"/");return css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(fullMatch,origUrl){var newUrl,unquotedOrigUrl=origUrl.trim().replace(/^"(.*)"$/,function(o,$1){return $1}).replace(/^'(.*)'$/,function(o,$1){return $1});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)?fullMatch:(newUrl=0===unquotedOrigUrl.indexOf("//")?unquotedOrigUrl:0===unquotedOrigUrl.indexOf("/")?baseUrl+unquotedOrigUrl:currentDir+unquotedOrigUrl.replace(/^\.\//,""),"url("+JSON.stringify(newUrl)+")")})}},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE_7__}])});

package.json

 {
   "name": "react-skeleton-loader",
-  "version": "0.1.6",
+  "version": "1.0.0",
   "description": "",
@@ -8,2 +8,3 @@ "main": "dist/Skeleton.js",
     "build": "webpack",
+    "deploy-storybook": "storybook-to-ghpages",
     "storybook": "start-storybook -p 6006",
@@ -36,2 +37,3 @@ "build-storybook": "build-storybook",
     "@storybook/react": "^3.3.12",
+    "@storybook/storybook-deployer": "^2.3.0",
     "babel-core": "^6.26.0",
@@ -38,0 +40,0 @@ "babel-eslint": "^8.2.1",

README.md

 # React Skeleton Loader
 
-Readme will be done shortly 👌
+[![npm version](https://badge.fury.io/js/react-skeleton-loader.svg)](https://badge.fury.io/js/react-skeleton-loader)
+React Skeleton Loader is a React component designed to help you easily integrate custom animated skeletons for loading states.
+It best works with text elements as it adopts to the fonts size and line height of your content, but it can be easily fitted to use with other objects like images and avatars.
+
+# Demo
+[Click here 👌](https://henrykuzmick.github.io/react-skeleton-loader)
+
+# Basic Usage
+
+The components you create should have loading states embeded in them.
+You can do this however you want. You could rely on state changes, promise responses, or simply checking if the props passed aren't undefined. 
+
+```js
+import Skeleton from 'react-skeleton-loader';
+
+const Page = (props) => {
+  return(
+    <div>
+      <h1>props.title | <Skeleton /></h1>
+      <p>props.body | <Skeleton count={5} /></p>
+    </div>
+  )
+}
+```
+
+# Props
+
+| Prop             | Type    | Default | Description                           |
+| ---------------- | ------- | ------- | ------------------------------------- |
+| width            | string  | "150px" | The (max) width of the element        |
+| height           | string  | "100%"  | The (max) height of your element      |
+| widthRandomness  | number  | 0.25    | Amount of width randomness            |
+| heightRandomness | number  | 0       | Amount of height randomness           |
+| borderRadius     | string  | 8px     | border radius of the element          |
+| color            | string  | #EFF1F6 | the background color of the element   |
+| count            | number  | 1       | How many time should this be repeated |
+| animated         | boolean | true    | If it should animate                  |
+
+When using `widthRandomness` or `heightRandomness` the maximum width and height will be determined by `width` and `height` props.
+It can then only decrease. For example if `widthRandomness` is set to 0.25, and `width` is set to 100px the width will vary between 100px and 75px.
+
+# Licence
+
+MIT

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39040

increased by5.84%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

46

increased by1433.33%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes