react-pulsable - npm Package Compare versions

Comparing version 0.1.42 to 1.0.0

dist/@types/pulsable.d.ts

 import { ReactNode } from 'react';
-import './css/index.scss';
-interface bgColors {
-    medium: string;
-    light: string;
-}
-type pulseAnimation = 'none' | 'pulse' | 'wave' | 'wave-reverse';
-export interface Props {
-    animation?: pulseAnimation;
+import { type Props } from 'pulsable';
+import 'pulsable/index.css';
+export interface IPulsable extends Props {
     children: ReactNode;
     isLoading: boolean;
-    bgColors?: bgColors;
-    noRadius?: boolean;
-    noPadding?: boolean;
     className?: string;
+    config?: Props;
     [key: string]: any;
 }
-declare const Pulsable: ({ animation, children, isLoading, bgColors, noRadius, noPadding, className, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Pulsable: ({ children, isLoading, className, config, ...props }: IPulsable) => import("react/jsx-runtime").JSX.Element;
 export default Pulsable;

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var T=Object.create;var v=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var I=(t,e)=>{for(var a in e)v(t,a,{get:e[a],enumerable:!0})},N=(t,e,a,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of D(e))!R.call(t,l)&&l!==a&&v(t,l,{get:()=>e[l],enumerable:!(u=A(e,l))||u.enumerable});return t};var V=(t,e,a)=>(a=t!=null?T(S(t)):{},N(e||!t||!t.__esModule?v(a,"default",{value:t,enumerable:!0}):a,t)),q=t=>N(v({},"__esModule",{value:!0}),t);var $={};I($,{default:()=>Y});module.exports=q($);var m=require("react"),C=V(require("classnames"));var H=`
+"use strict";var y=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var C=(e,a)=>{for(var r in a)y(e,r,{get:a[r],enumerable:!0})},E=(e,a,r,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of N(a))!z.call(e,n)&&n!==r&&y(e,n,{get:()=>a[n],enumerable:!(p=P(a,n))||p.enumerable});return e};var A=e=>E(y({},"__esModule",{value:!0}),e);var M={};C(M,{default:()=>S});module.exports=A(M);var v=require("react");var I=`
   <svg
@@ -17,2 +17,2 @@ xmlns="http://www.w3.org/2000/svg"
   </svg>
-`;var M=require("react/jsx-runtime"),_={pulse:"pulse-animate",wave:"pulse-animate-wave","wave-reverse":"pulse-animate-wave-reverse",none:"pulse-animate-none"};function F(t){var e=window.getComputedStyle(t,null),a=parseInt(e.getPropertyValue("height"),10),u=parseInt(e.getPropertyValue("font-size"),10),l=parseInt(e.getPropertyValue("line-height"),10),b=e.getPropertyValue("box-sizing");if(Number.isNaN(l)&&(l=u*1.2),b==="border-box"){var h=parseInt(e.getPropertyValue("padding-top"),10),f=parseInt(e.getPropertyValue("padding-bottom"),10),p=parseInt(e.getPropertyValue("border-top-width"),10),w=parseInt(e.getPropertyValue("border-bottom-width"),10);a=a-h-f-p-w}var g=Math.ceil(a/l);return{lines:g,font_size:u,height:a}}var X=({animation:t="wave",children:e,isLoading:a,bgColors:u,noRadius:l=!1,noPadding:b=!1,className:h,...f})=>{let p=(0,m.useRef)(null),[w,g]=(0,m.useState)(!0),k=()=>{if(typeof window>"u")return null;let o=document.createElement("div"),n=o.cloneNode(!0);n.classList.add("pulse-child-para-cont","pulse-no-rounded","pulse-child"),o.style.setProperty("--color-transparent-medium",u?.medium||"rgba(130, 130, 130, 0.3)"),o.style.setProperty("--color-transparent-light",u?.light||"rgba(130, 130, 130, 0.2)"),o.classList.add(_[t]);let r=o.cloneNode(!0);r.classList.add("pulse-child-para"),o.classList.add("pulse-child");let y=o.cloneNode(!0);y.classList.add("pulse-child-circle"),l&&(o.classList.add("pulse-no-rounded"),r.classList.add("pulse-no-rounded"));let s=o.cloneNode(!0);s.classList.add("pulse-child-hidden");let i=o.cloneNode(!0);i.classList.add("pulse-child-rect");let c=o.cloneNode(!0);return c.classList.add("pulse-child-rect-full"),{pCircle:()=>y.cloneNode(!0),pPara:()=>r.cloneNode(!0),pHidden:()=>s.cloneNode(!0),pRect:()=>i.cloneNode(!0),pRectFull:()=>c.cloneNode(!0),pParaCont:()=>n.cloneNode(!0)}},[d,E]=(0,m.useState)(k);return(0,m.useEffect)(()=>{requestAnimationFrame(()=>{if(a){if(g(!0),!p.current){g(!1);return}if(d||E(k()),!d){g(!1);return}let n=document.createElement("div");n.classList.add("pulse-svg-cont"),n.innerHTML=H,p.current.querySelectorAll(".pulsable").forEach(r=>{if(r.classList.add("pulse-element"),r.hasAttribute("disabled")||(r.classList.add("pulse-has-disabled-attr"),r.setAttribute("disabled","true")),r.childNodes.forEach(i=>{i.classList&&!i.classList.contains("pulse-child")&&(i.classList.add("pulse-child-element"),i?.hasAttribute("disabled")||(i.classList.add("pulse-has-disabled-attr"),i.setAttribute("disabled","true")))}),!r.querySelector(".pulse-child")){var s;let i=r.classList;if(i.contains("pulsable-circle"))s=d.pCircle();else if(i.contains("pulsable-hidden"))s=d.pHidden();else if(i.contains("pulsable-para")){s=d.pParaCont();let c=F(r),z=(c.height-c.font_size*c.lines)/(c.lines+2),x=`${Math.max(z,8)}px`;s.style.setProperty("padding-top",x),s.style.setProperty("padding-bottom",x);let L=d.pPara();L.style.setProperty("height",`${c.font_size*80/100}px`);for(let P=0;P<c.lines;P++)s.appendChild(L.cloneNode(!0))}else b?s=d.pRectFull():s=d.pRect();i.contains("pulsable-img")&&s.appendChild(n),r.parentNode?.appendChild(s),r.appendChild(s)}}),g(!1)}else{if(!p.current)return;p.current.querySelectorAll(".pulse-child").forEach(n=>{n.parentNode?.removeChild(n)}),p.current.querySelectorAll(".pulse-element").forEach(n=>{n.classList&&n.classList.remove("pulse-element")}),p.current.querySelectorAll(".pulse-has-disabled-attr").forEach(n=>{n.removeAttribute("disabled"),n.classList.remove("pulse-has-disabled-attr")}),p.current.querySelectorAll(".pulse-child-element").forEach(n=>{n.classList.remove("pulse-child-element")})}})},[a,p.current]),(0,M.jsx)("div",{ref:p,className:(0,C.default)("pulse-container",{"pulse-calculating pulse-container-css":a&&w,"pulse-container-css":a},h),...f,children:e})},Y=X;
+`,R={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function V(e){var a=window.getComputedStyle(e,null),r=parseInt(a.getPropertyValue("height"),10),p=parseInt(a.getPropertyValue("font-size"),10),n=parseInt(a.getPropertyValue("line-height"),10),g=a.getPropertyValue("box-sizing");if(Number.isNaN(n)&&(n=p*1.2),g==="border-box"){var b=parseInt(a.getPropertyValue("padding-top"),10),d=parseInt(a.getPropertyValue("padding-bottom"),10),u=parseInt(a.getPropertyValue("border-top-width"),10),m=parseInt(a.getPropertyValue("border-bottom-width"),10);r=r-b-d-u-m}var s=Math.ceil(r/n);return{lines:s,font_size:p,height:r}}var q=({rootElement:e,config:a,loading:r=!0})=>{let{animation:p="wave",bgColors:n,noRadius:g=!1,noPadding:b=!1}=a||{},d=t=>{t?e.classList.add("pl-calc"):e.classList.remove("pl-calc")},u=t=>{t?e.classList.add("pl-css"):e.classList.remove("pl-css")},m=()=>{if(typeof window>"u")return null;let t=document.createElement("div"),i=t.cloneNode(!0);i.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),t.style.setProperty("--color-transparent-medium",n?.medium||"rgba(130, 130, 130, 0.3)"),t.style.setProperty("--color-transparent-light",n?.light||"rgba(130, 130, 130, 0.2)"),t.classList.add(R[p]);let l=t.cloneNode(!0);l.classList.add("pl-child-para"),t.classList.add("pl-child");let o=t.cloneNode(!0);o.classList.add("pl-child-circle"),g&&(t.classList.add("pl-no-rounded"),l.classList.add("pl-no-rounded"));let c=t.cloneNode(!0);c.classList.add("pl-child-hidden");let f=t.cloneNode(!0);f.classList.add("pl-child-rect");let h=t.cloneNode(!0);return h.classList.add("pl-child-rect-full"),{pCircle:()=>o.cloneNode(!0),pPara:()=>l.cloneNode(!0),pHidden:()=>c.cloneNode(!0),pRect:()=>f.cloneNode(!0),pRectFull:()=>h.cloneNode(!0),pParaCont:()=>i.cloneNode(!0)}};var s=null;requestAnimationFrame(()=>{if(!e){d(!1);return}if(e.classList.contains("pl-cont")||e.classList.add("pl-cont"),r){if(d(!0),u(!0),s||(s=m()),!s){d(!1),u(!1);return}let t=document.createElement("div");t.classList.add("pl-svg-cont"),t.innerHTML=I,e.querySelectorAll(".pulsable").forEach(i=>{if(i.classList.add("pl-element"),i.hasAttribute("disabled")||(i.classList.add("pl-has-disabled-attr"),i.setAttribute("disabled","true")),i.childNodes.forEach(o=>{o.classList&&!o.classList.contains("pl-child")&&(o.classList.add("pl-child-element"),o?.hasAttribute("disabled")||(o.classList.add("pl-has-disabled-attr"),o.setAttribute("disabled","true")))}),!i.querySelector(".pl-child")){var l;let o=i.classList;if(!s)return;if(o.contains("pulsable-circle"))l=s.pCircle();else if(o.contains("pulsable-hidden"))l=s.pHidden();else if(o.contains("pulsable-para")){l=s.pParaCont();let c=V(i),f=(c.height-c.font_size*c.lines)/(c.lines+2),h=`${Math.max(f,8)}px`;l.style.setProperty("padding-top",h),l.style.setProperty("padding-bottom",h);let w=s.pPara();w.style.setProperty("height",`${c.font_size*80/100}px`);for(let k=0;k<c.lines;k++)l.appendChild(w.cloneNode(!0))}else b?l=s.pRectFull():l=s.pRect();o.contains("pulsable-img")&&l.appendChild(t),i.parentNode?.appendChild(l),i.appendChild(l)}}),d(!1)}else e.querySelectorAll(".pl-child").forEach(t=>{t.parentNode?.removeChild(t)}),e.querySelectorAll(".pl-element").forEach(t=>{t.classList&&t.classList.remove("pl-element")}),e.querySelectorAll(".pl-has-disabled-attr").forEach(t=>{t.removeAttribute("disabled"),t.classList.remove("pl-has-disabled-attr")}),e.querySelectorAll(".pl-child-element").forEach(t=>{t.classList.remove("pl-child-element")}),u(!1)})},x=q;var L=require("react/jsx-runtime"),H=({children:e,isLoading:a,className:r,config:p,...n})=>{let{animation:g="wave",bgColors:b,noRadius:d=!1,noPadding:u=!1}=p||{},m=(0,v.useRef)(null);return(0,v.useEffect)(()=>{m.current&&x({rootElement:m.current,config:{animation:g,bgColors:b,noRadius:d,noPadding:u},loading:a})},[a,m.current]),(0,L.jsx)("div",{ref:m,className:r,...n,children:e})},S=H;

package.json

@@ -5,4 +5,4 @@ {
   "license": "MIT",
-  "version": "0.1.42",
-  "description": "This is a simple react component that can be used to wrap other components and add a pulsing/skeleton effect to them.",
+  "version": "1.0.0",
+  "description": "This is a simple and customizable react component library to add a pulsing/skeleton loading effect to your existing component.",
   "private": false,
@@ -35,10 +35,7 @@ "types": "./dist/@types/pulsable.d.ts",
     "skeleton",
-    "pulse",
-    "pulse-effect",
-    "pulse-component",
-    "pulse-skeleton",
     "skeleton-component",
-    "skeleton-effect",
+    "skeleton-loading",
     "skeleton-loader",
-    "skeleton-pulse"
+    "skeleton-content-loader",
+    "skeleton-effect"
   ],
@@ -63,2 +60,3 @@ "files": [
   "dependencies": {
+    "pulsable": "^0.0.11"
   },
@@ -65,0 +63,0 @@ "peerDependencies": {

README.md

@@ -9,3 +9,3 @@ # React Pulsable
 
-### Example 1
+### how to use it?
 
@@ -23,7 +23,8 @@ ```jsx
       <Pulsable
-        animation="wave-reverse"
         isLoading={isLoading}
-        bgColors={{
-          light: 'rgba(0, 128, 0, 0.2)',
-          medium: 'rgba(0, 128, 0, 0.3)',
+        config={{
+          bgColors: {
+            light: 'rgba(0, 128, 0, 0.2)',
+            medium: 'rgba(0, 128, 0, 0.3)',
+          },
         }}
@@ -36,7 +37,9 @@ >
       <Pulsable
-        noRadius
         isLoading={isLoading}
-        bgColors={{
-          light: 'rgba(0, 0, 255, 0.2)',
-          medium: 'rgba(0, 0, 255, 0.3)',
+        config={{
+          noRadius: true,
+          bgColors: {
+            light: 'rgba(0, 0, 255, 0.2)',
+            medium: 'rgba(0, 0, 255, 0.3)',
+          },
         }}
@@ -49,7 +52,9 @@ >
       <Pulsable
-        noPadding
         isLoading={isLoading}
-        bgColors={{
-          light: 'tomato',
-          medium: 'orange',
+        config={{
+          noPadding: true,
+          bgColors: {
+            light: 'tomato',
+            medium: 'orange',
+          },
         }}
@@ -64,3 +69,3 @@ >
 
-### Component Example
+### what you have to do in your component?
 
@@ -97,9 +102,11 @@ ```jsx
 - `isLoading`: a boolean that indicates whether the component should be pulsing or not.
-- `bgColors`: an object that contains the background colors for the pulsing effect. It has two properties:
-  - `light`: the light color of the background.
-  - `medium`: the medium color of the background.
-- `noRadius`: a boolean that indicates whether the pulsing effect should have rounded corners or not. By default it has rounded corners.
-- `noPadding`: a boolean that indicates whether the pulsing effect should have padding in each skeleton items or not. By default it has padding.
+- `config`: an object that contains the configuration for the pulsing effect. It has following properties:
+  - `bgColors`: an object that contains the background colors for the pulsing effect. It has two properties:
+    - `light`: the light color of the background.
+    - `medium`: the medium color of the background.
+  - `noRadius`: a boolean that indicates whether the pulsing effect should have rounded corners or not. By default it has rounded corners.
+  - `noPadding`: a boolean that indicates whether the pulsing effect should have padding in each skeleton items or not. By default it has padding.
+  - `animation`: you can pass animation type as a string. default is `wave` and other options are `wave-reverse`, `pulse`, `none
+
 - `className`: as Pulsable component is a wrapper component, you can pass className or alomost all attributes of div element.[means you can treat it as a div, and use accordingly]
-- `animation`: you can pass animation type as a string. default is `wave` and other options are `wave-reverse`, `pulse`, `none`.
 
@@ -106,0 +113,0 @@ > check [example](https://codesandbox.io/s/k7fdzw?file=/src/App.js) for more.

Fixed alerts

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

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

121

increased by6.14%

Worsened metrics

Total package byte prevSize

21034

decreased by-5.5%

Dependency count

3

increased by50%

Number of package files

7

decreased by-12.5%

Lines of code

90

decreased by-10.89%

Dependency changes

• + Addedpulsable@^0.0.11

• + Addedpulsable@0.0.11(transitive)