Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdheshnayak/react-pulsable
This is a simple and customizable react component library to add the pulsing/skeleton loading effect to your existing component.
https://github.com/abdheshnayak/react-pulsable
component pulse-effects react skeleton
Last synced: 6 days ago
JSON representation
This is a simple and customizable react component library to add the pulsing/skeleton loading effect to your existing component.
- Host: GitHub
- URL: https://github.com/abdheshnayak/react-pulsable
- Owner: abdheshnayak
- License: mit
- Created: 2023-10-06T21:48:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-13T06:00:00.000Z (about 1 month ago)
- Last Synced: 2025-01-13T14:56:21.470Z (10 days ago)
- Topics: component, pulse-effects, react, skeleton
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-pulsable
- Size: 2.88 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# 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](https://codesandbox.io/s/k7fdzw?file=/src/App.js)**
### Importing
```jsx
import Pulsable from 'react-pulsable';
import 'react-pulsable/index.css';
```
### how to use it?
```jsx
const App = ({ isLoading }: { isLoading: boolean }) => {
return (
<>
{/* default background */}
{/* custom background */}
{/* custom background with no rounded corners */}
{/* custom background with no padding in each skeleton items */}
>
);
};
```
### what you have to do in your component?
```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](https://codesandbox.io/s/k7fdzw?file=/src/App.js) for more.
### 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 `![]()
` 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.
### Using CDN
for cdn you can use another package [pulsable](https://www.npmjs.com/package/pulsable)