react-content-shimmer - npm Package Compare versions

Comparing version 2.0.2 to 2.1.3

dist/index.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 interface CustomLoader {
@@ -6,3 +7,3 @@ rows?: Number;
     elevation?: Number;
-    speed?: "slow" | "fast" | "xfast";
+    speed?: Number;
     rounded?: String;
@@ -14,16 +15,17 @@ style?: Object;
     };
+    animation?: "wave" | "pulse";
 }
-declare const ContentShimmer: ({ rows, background, elevation, speed, size, forground, rounded, style }: CustomLoader) => JSX.Element;
+declare const ContentShimmer: ({ rows, background, elevation, speed, size, forground, rounded, style, animation }: CustomLoader) => JSX.Element;
 interface profileStyle extends CustomLoader {
     radius?: "xs" | "sm" | "md" | "lg" | "xl";
 }
-declare const ProfileShimmer: ({ rows, background, elevation, speed, forground, rounded, radius, style }: profileStyle) => JSX.Element;
+declare const ProfileShimmer: ({ rows, background, elevation, speed, forground, rounded, radius, style, animation }: profileStyle) => JSX.Element;
 interface SocialPlatFormStyle extends CustomLoader {
     variant?: "default" | "rounded";
 }
-declare const SocialShimmer: ({ rows, elevation, speed, background, forground, variant, style }: SocialPlatFormStyle) => JSX.Element;
-declare const BulletListShimmer: ({ rows, elevation, speed, background, forground, variant, style }: SocialPlatFormStyle) => JSX.Element;
-declare const CodeShimmer: ({ rows, elevation, speed, background, forground, variant, style }: SocialPlatFormStyle) => JSX.Element;
-declare const CardShimmer: ({ rows, elevation, speed, background, forground, variant, style }: SocialPlatFormStyle) => JSX.Element;
+declare const SocialShimmer: ({ rows, elevation, speed, background, forground, variant, style, animation }: SocialPlatFormStyle) => JSX.Element;
+declare const BulletListShimmer: ({ rows, elevation, speed, background, forground, variant, style, animation }: SocialPlatFormStyle) => JSX.Element;
+declare const CodeShimmer: ({ rows, elevation, speed, background, forground, variant, style, animation }: SocialPlatFormStyle) => JSX.Element;
+declare const CardShimmer: ({ rows, elevation, speed, background, forground, variant, style, animation }: SocialPlatFormStyle) => JSX.Element;
 export { ProfileShimmer, SocialShimmer, BulletListShimmer, CodeShimmer, CardShimmer, };
 export default ContentShimmer;

dist/index.js

@@ -13,3 +13,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       rounded = _ref.rounded,
-      style = _ref.style;
+      style = _ref.style,
+      animation = _ref.animation;
   var counter = [],
@@ -25,3 +26,3 @@ i = 0,
     boxShadow: elevation ? "0 1px 2px 1px rgba(0, 0, 0, " + elevation + ")" : "0 1px 2px 1px rgba(0, 0, 0, 0.08), 0 -1px 3px 0 rgba(0, 0, 0, 0.06);",
-    animationDuration: speed == "slow" ? "1.5s" : speed == "fast" ? "1s" : speed == "xfast" ? "0.5s" : "1s",
+    animationDuration: typeof speed === "undefined" ? "1s" : speed + "s",
     borderRadius: rounded ? "" + rounded : "0px",
@@ -33,3 +34,3 @@ background: "linear-gradient(to right, " + (background ? background : "#eeeeee") + " 8%, " + (forground ? forground : "#dddddd") + " 18%, " + (background ? background : "#eeeeee") + " 33%)",
   var finalCardLoader = Object.assign(cardLoader, style);
-  return React.createElement("div", null, React.createElement("style", null, "@keyframes loaderAnimationToRight {\n            0% {\n                background-position: -468px 0\n            }\n            100% {\n                background-position: 468px 0\n            }\n          }\n          .defaultProp {\n            background-size: 1500px 1000px !important;\n            animation-fill-mode: forwards !important;\n            animation-iteration-count: infinite !important;\n          }\n          \n          .ShimmerRight {\n              animation-name: loaderAnimationToRight;\n          }\n          "), counter.map(function (_, k) {
+  return React.createElement("div", null, React.createElement("style", null, "@keyframes wave {\n            0% {\n                background-position: -468px 0\n            }\n            100% {\n                background-position: 468px 0\n            }\n          }\n          @keyframes pulse {\n            0% {\n                opacity: 0.8;\n            }\n            50% {\n              opacity: 0.4;\n            }\n            100% {\n              opacity: 1;\n            }\n          }\n          .defaultProp {\n            background-size: 1500px 1000px !important;\n            animation-fill-mode: forwards !important;\n            animation-iteration-count: infinite !important;\n          }\n          \n          .ShimmerRight {\n              animation-name: " + (typeof animation === "undefined" ? "wave" : animation) + ";\n          }\n          "), counter.map(function (_, k) {
     return React.createElement("div", {
@@ -51,3 +52,4 @@ key: k,
       radius = _ref2.radius,
-      style = _ref2.style;
+      style = _ref2.style,
+      animation = _ref2.animation;
   var counter = [],
@@ -82,2 +84,3 @@ i = 0,
       },
+      animation: animation,
       rounded: _rounded,
@@ -96,3 +99,4 @@ style: profileLoader
       variant = _ref3.variant,
-      style = _ref3.style;
+      style = _ref3.style,
+      animation = _ref3.animation;
   var counter = [],
@@ -116,2 +120,3 @@ i = 0,
     }, React.createElement(ProfileShimmer, {
+      animation: animation,
       elevation: elevation,
@@ -126,2 +131,3 @@ speed: speed,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -140,2 +146,3 @@ marginBottom: "1rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -151,2 +158,3 @@ height: 7,
     }))), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -175,3 +183,4 @@ marginTop: "1rem"
       variant = _ref4.variant,
-      style = _ref4.style;
+      style = _ref4.style,
+      animation = _ref4.animation;
   var counter = [],
@@ -198,2 +207,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       background: background,
@@ -209,2 +219,3 @@ elevation: elevation,
     }), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -224,2 +235,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -244,2 +256,3 @@ marginLeft: "1rem"
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       background: background,
@@ -255,2 +268,3 @@ elevation: elevation,
     }), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -270,2 +284,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -294,3 +309,4 @@ marginLeft: "1rem"
       variant = _ref5.variant,
-      style = _ref5.style;
+      style = _ref5.style,
+      animation = _ref5.animation;
   var counter = [],
@@ -313,2 +329,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -333,2 +350,3 @@ padding: "0.5rem"
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -348,2 +366,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -363,2 +382,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -384,2 +404,3 @@ marginLeft: "1rem",
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -399,2 +420,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -414,2 +436,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -435,2 +458,3 @@ marginLeft: "1rem",
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -450,2 +474,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -465,2 +490,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -480,2 +506,3 @@ marginLeft: "1rem",
     })), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -504,3 +531,4 @@ padding: "0.5rem"
       variant = _ref6.variant,
-      style = _ref6.style;
+      style = _ref6.style,
+      animation = _ref6.animation;
   var counter = [],
@@ -524,2 +552,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -539,2 +568,3 @@ height: 80,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -553,2 +583,3 @@ marginBottom: "0.5rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -564,2 +595,3 @@ height: 15,
     }))), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -578,2 +610,3 @@ marginTop: "1rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -580,0 +613,0 @@ marginTop: "0.5rem"

dist/index.modern.js

@@ -11,3 +11,4 @@ import React from 'react';
       rounded = _ref.rounded,
-      style = _ref.style;
+      style = _ref.style,
+      animation = _ref.animation;
   var counter = [],
@@ -23,3 +24,3 @@ i = 0,
     boxShadow: elevation ? "0 1px 2px 1px rgba(0, 0, 0, " + elevation + ")" : "0 1px 2px 1px rgba(0, 0, 0, 0.08), 0 -1px 3px 0 rgba(0, 0, 0, 0.06);",
-    animationDuration: speed == "slow" ? "1.5s" : speed == "fast" ? "1s" : speed == "xfast" ? "0.5s" : "1s",
+    animationDuration: typeof speed === "undefined" ? "1s" : speed + "s",
     borderRadius: rounded ? "" + rounded : "0px",
@@ -31,3 +32,3 @@ background: "linear-gradient(to right, " + (background ? background : "#eeeeee") + " 8%, " + (forground ? forground : "#dddddd") + " 18%, " + (background ? background : "#eeeeee") + " 33%)",
   var finalCardLoader = Object.assign(cardLoader, style);
-  return React.createElement("div", null, React.createElement("style", null, "@keyframes loaderAnimationToRight {\n            0% {\n                background-position: -468px 0\n            }\n            100% {\n                background-position: 468px 0\n            }\n          }\n          .defaultProp {\n            background-size: 1500px 1000px !important;\n            animation-fill-mode: forwards !important;\n            animation-iteration-count: infinite !important;\n          }\n          \n          .ShimmerRight {\n              animation-name: loaderAnimationToRight;\n          }\n          "), counter.map(function (_, k) {
+  return React.createElement("div", null, React.createElement("style", null, "@keyframes wave {\n            0% {\n                background-position: -468px 0\n            }\n            100% {\n                background-position: 468px 0\n            }\n          }\n          @keyframes pulse {\n            0% {\n                opacity: 0.8;\n            }\n            50% {\n              opacity: 0.4;\n            }\n            100% {\n              opacity: 1;\n            }\n          }\n          .defaultProp {\n            background-size: 1500px 1000px !important;\n            animation-fill-mode: forwards !important;\n            animation-iteration-count: infinite !important;\n          }\n          \n          .ShimmerRight {\n              animation-name: " + (typeof animation === "undefined" ? "wave" : animation) + ";\n          }\n          "), counter.map(function (_, k) {
     return React.createElement("div", {
@@ -49,3 +50,4 @@ key: k,
       radius = _ref2.radius,
-      style = _ref2.style;
+      style = _ref2.style,
+      animation = _ref2.animation;
   var counter = [],
@@ -80,2 +82,3 @@ i = 0,
       },
+      animation: animation,
       rounded: _rounded,
@@ -94,3 +97,4 @@ style: profileLoader
       variant = _ref3.variant,
-      style = _ref3.style;
+      style = _ref3.style,
+      animation = _ref3.animation;
   var counter = [],
@@ -114,2 +118,3 @@ i = 0,
     }, React.createElement(ProfileShimmer, {
+      animation: animation,
       elevation: elevation,
@@ -124,2 +129,3 @@ speed: speed,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -138,2 +144,3 @@ marginBottom: "1rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -149,2 +156,3 @@ height: 7,
     }))), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -173,3 +181,4 @@ marginTop: "1rem"
       variant = _ref4.variant,
-      style = _ref4.style;
+      style = _ref4.style,
+      animation = _ref4.animation;
   var counter = [],
@@ -196,2 +205,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       background: background,
@@ -207,2 +217,3 @@ elevation: elevation,
     }), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -222,2 +233,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -242,2 +254,3 @@ marginLeft: "1rem"
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       background: background,
@@ -253,2 +266,3 @@ elevation: elevation,
     }), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -268,2 +282,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -292,3 +307,4 @@ marginLeft: "1rem"
       variant = _ref5.variant,
-      style = _ref5.style;
+      style = _ref5.style,
+      animation = _ref5.animation;
   var counter = [],
@@ -311,2 +327,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -331,2 +348,3 @@ padding: "0.5rem"
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -346,2 +364,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -361,2 +380,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -382,2 +402,3 @@ marginLeft: "1rem",
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -397,2 +418,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -412,2 +434,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -433,2 +456,3 @@ marginLeft: "1rem",
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -448,2 +472,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -463,2 +488,3 @@ marginLeft: "1rem",
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -478,2 +504,3 @@ marginLeft: "1rem",
     })), React.createElement("div", null, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -502,3 +529,4 @@ padding: "0.5rem"
       variant = _ref6.variant,
-      style = _ref6.style;
+      style = _ref6.style,
+      animation = _ref6.animation;
   var counter = [],
@@ -522,2 +550,3 @@ i = 0,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -537,2 +566,3 @@ height: 80,
     }, React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -551,2 +581,3 @@ marginBottom: "0.5rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       size: {
@@ -562,2 +593,3 @@ height: 15,
     }))), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -576,2 +608,3 @@ marginTop: "1rem"
     }), React.createElement(ContentShimmer, {
+      animation: animation,
       style: {
@@ -578,0 +611,0 @@ marginTop: "0.5rem"

package.json

 {
     "name": "react-content-shimmer",
-    "version": "2.0.2",
+    "version": "2.1.3",
     "description": "Content Shimmer to easily create placeholder loading, image loading, card loading, etc .., free to change the colors, speed, sizes, radius and shadow also have few deafult Loding Componets to use. (CardShimmer,ProfileShimmer,SocialShimmer,BulletListShimmer,CodeShimmer)",
     "author": "Tirth886",
     "license": "MIT",
-    "repository": "Tirth886/contentLoader",
+    "repository": "Tirth886/react-content-shimmer",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",
-    "homepage": "https://github.com/Tirth886/contentLoader",
+    "homepage": "https://github.com/Tirth886/react-content-shimmer",
     "source": "src/index.tsx",
-    "keywords": ["react", "content", "loader", "placeholder", "shimmer", "skeleton"],
+    "keywords": [
+        "react",
+        "content",
+        "loader",
+        "placeholder",
+        "shimmer",
+        "skeleton"
+    ],
     "engines": {
@@ -67,2 +74,2 @@ "node": ">=10"
     "dependencies": {}
-}
+}

README.md

@@ -8,3 +8,3 @@ ## React Content Shimmer / Loader
 #
-![ExampleCode](https://raw.githubusercontent.com/Tirth886/contentLoader/main/ss/customizeLoader.gif)
+![ExampleCode](https://raw.githubusercontent.com/Tirth886/react-content-shimmer/main/ss/customizeLoader.gif)
 
@@ -29,6 +29,6 @@ [![NPM](https://img.shields.io/npm/v/react-content-shimmer.svg)](https://www.npmjs.com/package/react-content-shimmer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 ```jsx
-import { ContentLoader } from 'react-content-shimmer'
-const CustomLoader = () => {
+import ContentShimmer from 'react-content-shimmer'
+const YourStyleName = () => {
   return (
-   <Shimmer />
+   <ContentShimmer />
   )
@@ -46,3 +46,3 @@ }
 | **`elevation?: number`** <br /> Defaults to `0.08`    | - | It's is use for background outset shadow to your ContentShimmer|
-| **`speed?: string`** <br /> Defaults to `fast`     | (`slow - fast - xfast`) | Controll Speed of animation|
+| **`speed?: number`** <br /> Defaults to `1s`     | - | Controll Speed of animation support value in seconds|
 | **`rounded?: string`** <br /> Defaults to `0px`       | - | Curve of your Loader Component in px , percentage (%)...<br/>available for use in `<ContentShimmer/> , <ProfileShimmer />`|
@@ -53,4 +53,4 @@ | **`style?: object`**        | - | Give extra styling you want accept all css properties <br/> |
 | **`variant?: string`** <br /> Defaults to `rounded`| (`default - rounded`)| Shape for the define Style like <br/>`<SocialShimmer />, <CodeShimmer />,<BulletListShimmer />`|
+| **`animation?: string`** <br /> Defaults to `wave`| (`wave - pulse`)| Change animation for an of you shimmer or loader|
 
-
 ## Example 
@@ -69,3 +69,3 @@ `**Plug and play component**`
 ```
-![ExampleCode](https://raw.githubusercontent.com/Tirth886/contentLoader/main/ss/socialStyle.png)
+![ExampleCode](https://raw.githubusercontent.com/Tirth886/react-content-shimmer/main/ss/socialStyle.png)
 
@@ -82,3 +82,3 @@ ## 2. **Bullet List Style**
 ```
-![ExampleCode](https://raw.githubusercontent.com/Tirth886/contentLoader/main/ss/bulletStyle.png)
+![ExampleCode](https://raw.githubusercontent.com/Tirth886/react-content-shimmer/main/ss/bulletStyle.png)
 
@@ -95,3 +95,3 @@ ## 3. **Code Style**
 ```
-![ExampleCode](https://raw.githubusercontent.com/Tirth886/contentLoader/main/ss/codeStyle.png)
+![ExampleCode](https://raw.githubusercontent.com/Tirth886/react-content-shimmer/main/ss/codeStyle.png)
 
@@ -108,3 +108,3 @@ ## 4. **Profile Style**
 ```
-![ExampleCode](https://raw.githubusercontent.com/Tirth886/contentLoader/main/ss/profileStyle.png)
+![ExampleCode](https://raw.githubusercontent.com/Tirth886/react-content-shimmer/main/ss/profileStyle.png)
 
@@ -116,3 +116,3 @@
 ```jsx
-import { ContentShimmer } from 'react-content-shimmer'
+import ContentShimmer from 'react-content-shimmer'
 const YourStyleName = () => {
@@ -119,0 +119,0 @@ return (

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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 repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99751

increased by6.87%

Lines of code

1183

increased by3.86%

Worsened metrics

Number of package files

8

decreased by-11.11%

No dependency changes