react-loading-skeleton - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

CHANGELOG.md

@@ -0,1 +1,9 @@
+## 3.0.1
+
+### Bug Fixes
+
+-   Fix circle skeleton animation being broken in Safari (#120)
+-   Fix `SkeletonProps` not being exported from the main entry point (#118)
+-   Fix `enableAnimation` prop having no effect. This was a regression.
+
 ## 3.0.0
@@ -2,0 +10,0 @@

dist/index.d.ts

 export * from './SkeletonStyleProps';
 export * from './SkeletonTheme';
 export { Skeleton as default } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';

dist/index.js

@@ -30,3 +30,3 @@ 'use strict';
     if (!enableAnimation)
-        style.backgroundImage = 'none';
+        style['--pseudo-element-display'] = 'none';
     if (typeof width === 'string' || typeof width === 'number')
@@ -33,0 +33,0 @@ style.width = width;

package.json

 {
   "name": "react-loading-skeleton",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "keywords": [
@@ -5,0 +5,0 @@ "react",

README.md

@@ -16,3 +16,6 @@ <div align="center">
 
-Learn about the [changes in version 3](https://github.com/dvtng/react-loading-skeleton/releases/tag/v3.0.0), or view the [v2 documentation](https://github.com/dvtng/react-loading-skeleton/tree/v2#readme).
+Learn about the [changes in version
+3](https://github.com/dvtng/react-loading-skeleton/releases/tag/v3.0.0), or view
+the [v2
+documentation](https://github.com/dvtng/react-loading-skeleton/tree/v2#readme).
 
@@ -79,3 +82,4 @@ ## Basic Usage
 
-Customize individual skeletons with props, or render a `SkeletonTheme` to style all skeletons below it in the React hierarchy:
+Customize individual skeletons with props, or render a `SkeletonTheme` to style
+all skeletons below it in the React hierarchy:
 
@@ -238,3 +242,3 @@ ```tsx
 
-Wrapping a skeleton in a container is simple:
+There are two ways to wrap a skeleton in a container:
 
@@ -259,3 +263,7 @@ ```tsx
 
-const wrapped = (
+// Method 1: Use the wrapper prop
+const wrapped1 = <Skeleton wrapper={Box} count={5} />
+
+// Method 2: Do it "the normal way"
+const wrapped2 = (
     <Box>
@@ -269,3 +277,4 @@ <Skeleton />
 
-In the example below, the height of the `<div>` will be slightly larger than 30 even though the `react-loading-skeleton` element is exactly 30px.
+In the example below, the height of the `<div>` will be slightly larger than 30
+even though the `react-loading-skeleton` element is exactly 30px.
 
@@ -278,3 +287,6 @@ ```tsx
 
-This is a consequence of how `line-height` works in CSS. If you need the `<div>` to be exactly 30px tall, set its `line-height` to 1. [See here](https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878) for more details.
+This is a consequence of how `line-height` works in CSS. If you need the `<div>`
+to be exactly 30px tall, set its `line-height` to 1. [See
+here](https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878)
+for more details.
 
@@ -287,2 +299,3 @@ ## Contributing
 
-Our logo is based off an image from [Font Awesome](https://fontawesome.com/license/free). Thanks!
+Our logo is based off an image from [Font
+Awesome](https://fontawesome.com/license/free). Thanks!

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24648

2.54%

Lines of code

223

1.36%

Number of lines in readme file

295

4.61%

Number of medium supply chain risk alerts

0

-100%

No dependency changes