react-pulsable - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/@types/index.d.ts

@@ -6,4 +6,5 @@ import { ReactNode } from 'react';
     isLoading: boolean;
+    backgroundColor?: string;
 }
-declare const Pulsable: ({ children, isLoading }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Pulsable: ({ children, isLoading, backgroundColor }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Pulsable;

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var b=Object.create;var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var L=(n,s)=>()=>(s||n((s={exports:{}}).exports,s),s.exports),A=(n,s)=>{for(var t in s)u(n,t,{get:s[t],enumerable:!0})},d=(n,s,t,o)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of y(s))!x.call(n,l)&&l!==t&&u(n,l,{get:()=>s[l],enumerable:!(o=v(s,l))||o.enumerable});return n};var E=(n,s,t)=>(t=n!=null?b(S(n)):{},d(s||!n||!n.__esModule?u(t,"default",{value:n,enumerable:!0}):t,n)),N=n=>d(u({},"__esModule",{value:!0}),n);var f=L((P,p)=>{(function(){"use strict";var n={}.hasOwnProperty,s="[native code]";function t(){for(var o=[],l=0;l<arguments.length;l++){var i=arguments[l];if(i){var r=typeof i;if(r==="string"||r==="number")o.push(i);else if(Array.isArray(i)){if(i.length){var a=t.apply(null,i);a&&o.push(a)}}else if(r==="object"){if(i.toString!==Object.prototype.toString&&!i.toString.toString().includes("[native code]")){o.push(i.toString());continue}for(var e in i)n.call(i,e)&&i[e]&&o.push(e)}}}return o.join(" ")}typeof p<"u"&&p.exports?(t.default=t,p.exports=t):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return t}):window.classNames=t})()});var w={};A(w,{default:()=>q});module.exports=N(w);var c=require("react"),m=E(f());var h=require("react/jsx-runtime"),g=({children:n,isLoading:s})=>{let t=(0,c.useRef)(null),[o,l]=(0,c.useState)(!0);return(0,c.useEffect)(()=>{if(l(!0),s){if(!t.current)return;t.current.querySelectorAll(".pulsable").forEach(r=>{if(r.classList.add("pulse-element"),r.childNodes.forEach(e=>{e.classList&&!e.classList.contains("pulse-child")&&(e.classList.add("pulse-child-element"),e?.hasAttribute("disabled")||(e.classList.add("pulse-has-disabled-attr"),e.setAttribute("disabled","true")))}),!r.querySelector(".pulse-child")){let e=document.createElement("div");e.classList.add("pulse-child","animate-pulse"),r.appendChild(e)}}),l(!1)}else{if(!t.current)return;t.current.querySelectorAll(".pulse-child").forEach(e=>{e.parentNode?.removeChild(e)}),t.current.querySelectorAll(".pulse-element").forEach(e=>{e.classList&&e.classList.remove("pulse-element")});let a=t.current.querySelectorAll(".pulse-child-element");console.log(a,"docs"),a.forEach(e=>{console.log(e.classList,"here"),e.classList.remove("pulse-child-element"),e.classList.contains("pulse-has-disabled-attr")&&(e.removeAttribute("disabled"),e.classList.remove("pulse-has-disabled-attr"))}),l(!1)}},[s,t.current]),(0,h.jsx)("div",{ref:t,className:(0,m.default)("pulse-container transition-all",{"opacity-0 pulse-container-css":s&&o,"flex flex-col pulse-container-css":s}),children:n})},q=g;
+"use strict";var y=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var A=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),E=(s,e)=>{for(var n in e)p(s,n,{get:e[n],enumerable:!0})},f=(s,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of S(e))!L.call(s,o)&&o!==n&&p(s,o,{get:()=>e[o],enumerable:!(i=v(e,o))||i.enumerable});return s};var C=(s,e,n)=>(n=s!=null?y(x(s)):{},f(e||!s||!s.__esModule?p(n,"default",{value:s,enumerable:!0}):n,s)),N=s=>f(p({},"__esModule",{value:!0}),s);var m=A((j,d)=>{(function(){"use strict";var s={}.hasOwnProperty,e="[native code]";function n(){for(var i=[],o=0;o<arguments.length;o++){var l=arguments[o];if(l){var u=typeof l;if(u==="string"||u==="number")i.push(l);else if(Array.isArray(l)){if(l.length){var r=n.apply(null,l);r&&i.push(r)}}else if(u==="object"){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){i.push(l.toString());continue}for(var c in l)s.call(l,c)&&l[c]&&i.push(c)}}}return i.join(" ")}typeof d<"u"&&d.exports?(n.default=n,d.exports=n):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return n}):window.classNames=n})()});var w={};E(w,{default:()=>q});module.exports=N(w);var a=require("react"),b=C(m());var h=require("react/jsx-runtime"),g=({children:s,isLoading:e,backgroundColor:n})=>{let i=(0,a.useRef)(null),[o,l]=(0,a.useState)(!0);return(0,a.useEffect)(()=>{if(l(!0),e){if(!i.current)return;i.current.querySelectorAll(".pulsable").forEach(r=>{if(r.classList.add("pulse-element"),r.childNodes.forEach(t=>{t.classList&&!t.classList.contains("pulse-child")&&(t.classList.add("pulse-child-element"),t?.hasAttribute("disabled")||(t.classList.add("pulse-has-disabled-attr"),t.setAttribute("disabled","true")))}),!r.querySelector(".pulse-child")){let t=document.createElement("div");t.style.backgroundColor=n||"#bebebe82",t.classList.add("pulse-child","animate-pulse"),r.appendChild(t)}}),l(!1)}else{if(!i.current)return;i.current.querySelectorAll(".pulse-child").forEach(t=>{t.parentNode?.removeChild(t)}),i.current.querySelectorAll(".pulse-element").forEach(t=>{t.classList&&t.classList.remove("pulse-element")});let c=i.current.querySelectorAll(".pulse-child-element");console.log(c,"docs"),c.forEach(t=>{console.log(t.classList,"here"),t.classList.remove("pulse-child-element"),t.classList.contains("pulse-has-disabled-attr")&&(t.removeAttribute("disabled"),t.classList.remove("pulse-has-disabled-attr"))}),l(!1)}},[e,i.current]),(0,h.jsx)("div",{ref:i,className:(0,b.default)("pulse-container transition-all",{"opacity-0 pulse-container-css":e&&o,"flex flex-col pulse-container-css":e}),children:s})},q=g;
 /*! Bundled license information:
@@ -3,0 +3,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "This is a simple react component that can be used to wrap other components and add a pulsing/skeleton effect to them.",
@@ -8,0 +8,0 @@ "private": false,

README.md

@@ -7,3 +7,3 @@ # React Pulsable
 
-## example
+## Example 1
 
@@ -13,3 +13,3 @@ ```jsx
 import Pulsable from 'react-pulsable';
-// import styles from 'react-pulsable/index.css';
+import 'react-pulsable/index.css';
 
@@ -39,3 +39,3 @@ const App = () => {
     >
-      <Pulsable isLoading={isLoading}>
+      <Pulsable isLoading={isLoading} backgroundColor="red">
         <div>
@@ -97,1 +97,24 @@ <h1>React Form with Pulsable</h1>
 
+## Usage Guide
+
+The component takes two props:
+- `isLoading`: a boolean that indicates whether the component should be pulsing or not.
+- `backgroundColor`: a string that indicates the background color of the pulsing effect. It can be any valid css color value.
+
+### Conditions:
+
+- You must wrap the component you want to add the pulsing effect to with the `Pulsable` component.
+- You must provide isLoading state to the `Pulsable` component.
+- You can use the `className="pulsable"` to add the pulsing effect to any element.
+- if your component is a self closing tag like `<img />` you should have to wrap it with div and add pulsable class to that. 
+
+#### Example 2
+
+```jsx
+<div className="pulsable">
+  <input type="text" id="name" style={{ width: '100%' }} />
+</div>
+```
+
+- As Shown infor better performance you can use `flex` and  `align-items: flex-start` in parentNode to avoid the pulsing effect from stretching the component. As shown in example 1. you can also add these styles conditionally wihile loading, if it's affecting your design.
+

No alert changes

Improved metrics

Total package byte prevSize

13865

increased by9.31%

Lines of code

51

increased by2%

Number of lines in readme file

117

increased by24.47%

No dependency changes