React Pulsable

This is a simple react component that can be used to wrap other components and add a pulsing/skeleton effect to them.

Code Sandbox Link

!Demo Image

$3

``jsx
import Pulsable from 'react-pulsable';
import 'react-pulsable/index.css';
`

$3

`jsx
const App = ({ isLoading }: { isLoading: boolean }) => {
return (
<>
{/ default background /}




{/ custom background /}
isLoading={isLoading}
config={{
bgColors: {
light: 'rgba(0, 128, 0, 0.2)',
medium: 'rgba(0, 128, 0, 0.3)',
},
}}
>



{/ custom background with no rounded corners /}
isLoading={isLoading}
config={{
noRadius: true,
bgColors: {
light: 'rgba(0, 0, 255, 0.2)',
medium: 'rgba(0, 0, 255, 0.3)',
},
}}
>



{/ custom background with no padding in each skeleton items /}
isLoading={isLoading}
config={{
noPadding: true,
bgColors: {
light: 'tomato',
medium: 'orange',
},
}}
>



);
};
`

$3

`jsx
const YourComponent = () => {
return (


Name:

Email:

Submit

);
};

`

Usage Guide

The component takes following props:
- isLoading: a boolean that indicates whether the component should be pulsing or not.
- 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]

> check example for more.

$3

- 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 you should have to wrap it with div and add pulsable class to that.
- if you want to hide some components while loading add class name pulsable-hidden
- if you want to add image icon in skeleton add class name pulsable-img
- for the paragraph use classname pulsable-para
- while applying base config to all elements, you may need some exceptions. for that you can use pulsable-no-radius, pulsable-no-padding, pulsable-radius and pulsable-padding. by using these classes you can override some specific elements.

- As Shown in example, for better performance you can use flex and align-items: flex-start in parentNode to avoid the pulsing effect from stretching the component. you can also add these styles conditionally wihile loading, if it's affecting your design.

$3

for cdn you can use another package pulsable