react-loading-skeleton - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

package.json

 {
   "name": "react-loading-skeleton",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
@@ -13,2 +13,3 @@ "author": "David Tang",
   "scripts": {
+    "start": "npm run storybook",
     "build": "webpack",
@@ -20,6 +21,6 @@ "storybook": "start-storybook -p 9001 -c .storybook",
   "peerDependencies": {
-    "react": "^15.6.1"
+    "react": "^15.6.1 || ^16.0.0"
   },
   "devDependencies": {
-    "@storybook/react": "^3.1.3",
+    "@storybook/react": "^3.2.13",
     "babel-core": "^6.25.0",
@@ -32,4 +33,4 @@ "babel-loader": "^7.0.0",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "style-loader": "^0.18.2",
@@ -36,0 +37,0 @@ "webpack": "^2.6.1",

README.md

@@ -18,10 +18,11 @@ # react-loading-skeleton
 
-## Adapts to the styles you have defined
+## Principles
 
+### Adapts to the styles you have defined
+
 The `<Skeleton>` component is designed to be used directly in your components,
 in place of content while it's still loading.
-Rather than meticulously crafting a skeleton screen to match the particular
-`font-size`, `line-height` or `margin`s your content takes on,
-use a `<Skeleton>` component in every piece of empty content to have it
-automatically fill the correct dimensions.
+Unlike other libraries, rather than meticulously crafting a skeleton screen to
+match the `font-size`, `line-height` or `margin`s your content takes on,
+use a `<Skeleton>` component to have it automatically fill the correct dimensions.
 
@@ -49,3 +50,3 @@ For example:
 
-## Don't make dedicated skeleton screens
+### Don't make dedicated skeleton screens
 
@@ -57,2 +58,17 @@ Instead, make components with *built-in* skeleton states.
 1. Components represent all possible states it can be in - loading included.
-1. It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.
+1. It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.
+
+## Theming
+
+Using a `<SkeletonTheme>` component, you can easily change the colors of all
+skeleton components below it in the React hierarchy:
+
+```javascript
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+
+<SkeletonTheme color="#202020" highlightColor="#444">
+    <p>
+        <Skeleton count={3} />
+    </p>
+</SkeletonTheme>
+```

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

30370

increased by1.31%

Number of lines in readme file

71

increased by29.09%

No dependency changes