react-loading-skeleton - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

package.json

 {
   "name": "react-loading-skeleton",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "MIT",
@@ -8,2 +8,3 @@ "author": "David Tang",
   "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "sideEffects": false,
@@ -10,0 +11,0 @@ "browserslist": [

src/index.d.ts

@@ -1,2 +0,2 @@
-import { Component, ReactNode } from "react";
+import { Component, ReactNode, CSSProperties } from "react";
 
@@ -12,2 +12,4 @@ export default class Skeleton extends Component<SkeletonProps> {}
   circle?: boolean;
+  style?: CSSProperties;
+  className?: string;
 }
@@ -14,0 +16,0 @@

src/index.test.js

@@ -20,1 +20,23 @@ import React from "react";
 });
+
+it("should render a skeleton with styles", () => {
+  const style = { boarderRadius: 10, height: 50, width: 50 };
+  const skeleton = mount(<Skeleton style={style} />);
+  expect(skeleton.find(skeletonSelector).prop("style")).toEqual(style);
+});
+
+it("inline style prop should overwrite custom styles", () => {
+  const style = { boarderRadius: 10, height: 50, width: 50 };
+  const skeleton = mount(<Skeleton height={100} style={style} />);
+  expect(skeleton.find(skeletonSelector).prop("style")).toEqual({
+    ...style,
+    height: 100,
+  });
+});
+
+it("should render custom className if provided", () => {
+  const skeleton = mount(<Skeleton count={4} className="testClass" />);
+  expect(skeleton.find(skeletonSelector).at(0).hasClass("testClass")).toBe(
+    true
+  );
+});

src/skeleton.js

@@ -39,3 +39,5 @@ import React from "react";
   height,
-  circle
+  circle,
+  style: customStyle,
+  className: customClassName,
 }) {
@@ -59,6 +61,11 @@ const elements = [];
 
+    let className = "react-loading-skeleton";
+    if (customClassName) {
+      className += " " + customClassName;
+    }
+
     elements.push(
       <span
         key={i}
-        className="react-loading-skeleton"
+        className={className}
         css={css`
@@ -68,3 +75,6 @@ ${skeletonStyles}
         `}
-        style={style}
+        style={{
+          ...customStyle,
+          ...style,
+        }}
       >
@@ -96,3 +106,3 @@ &zwnj;
   height: null,
-  circle: false
+  circle: false,
 };

stories/Skeleton.story.js

@@ -15,3 +15,3 @@ import React from "react";
       marginBottom: 10,
-      width: 100
+      width: 100,
     }}
@@ -54,3 +54,3 @@ >
     const handleToggle = () => {
-      setTheme(oldTheme => (oldTheme === "light" ? "dark" : "light"));
+      setTheme((oldTheme) => (oldTheme === "light" ? "dark" : "light"));
     };
@@ -104,3 +104,9 @@
   ))
-  .add("Skeleton displayed as circle", () => (
+  .add("with custom styles", () => (
+    <Skeleton
+      height="100px"
+      style={{ boarderRadius: 10, height: 50, width: 50 }}
+    />
+  ))
+  .add("as circle", () => (
     <div style={{ display: "flex", flexDirection: "column" }}>
@@ -107,0 +113,0 @@ <Skeleton count={1} height={50} width={50} circle={true} />

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

16920

decreased by-45.47%

Number of package files

15

decreased by-21.05%

Lines of code

389

decreased by-27.29%

No dependency changes