1.2.0 • Published 4 years ago
react-skeleton-loader-pulse v1.2.0
React Skeleton Loader Pulse Component
Skeleton Loader Pulse for ReactJS

Install
npm install react-skeleton-loader-pulseor
yarn add react-skeleton-loader-pulseUsage
SkeletonItem
import React from "react";
import { SkeletonItem } from "react-skeleton-loader-pulse";
export default function Component() {
return <SkeletonItem />;
}Props
| property | propType | required | default | description |
|---|---|---|---|---|
| color | string | undefined | - | #ccc | Skeleton color |
| pulseTime | number | undefined | - | 1 | pulse time in seconds |
| width | string | number | undefined | - | 100% | width container component |
| height | string | number | undefined | - | 10px | height container component |
| marginTop | string | number | undefined | - | 0 | margin top component |
| marginBottom | string | number | undefined | - | 0 | margin bottom component |
| marginLeft | string | number | undefined | - | 0 | margin left component |
| marginRight | string | number | undefined | - | 0 | margin right component |
| borderRadius | string | number | undefined | - | 0 | border radius component |
SkeletonLayout
import React from "react";
import { SkeletonLayout } from "react-skeleton-loader-pulse";
export default function Component() {
return (
<SkeletonLayout
align="center"
items={[
{
borderRadius: "50%",
height: 100,
marginBottom: 15,
width: 100,
},
{
height: 25,
marginBottom: 10,
width: 250,
},
{
height: 10,
width: 270,
},
{
height: 10,
width: 300,
},
{
height: 10,
width: 280,
},
]}
/>
);
}Props
| property | propType | required | default | description |
|---|---|---|---|---|
| color | string | undefined | - | #ccc | Skeleton color |
| pulseTime | number | undefined | - | 1 | pulse time |
| width | string | number | undefined | - | 100% | width container component |
| direction | "column" | "row" | undefined | - | column | flex-direction of layout |
| align | "center" | "left" | "right" | undefined | - | left | align items of layout |
| items | Item[] | yes | - | Layout: Array of objects |
Props array Item
| property | propType | required | default | description |
|---|---|---|---|---|
| height | number | string | yes | - | height |
| width | number | string | undefined | - | 100% | widtt |
| borderRadius | number | string | undefined | - | 0 | border radius |
| marginBottom | number | string | undefined | - | 3px | margin bottom |
| marginTop | number | string | undefined | - | 3px | margin top |
| marginLeft | number | string | undefined | - | 0 | margin left |
| marginRight | number | string | undefined | - | 0 | margin right |
LICENSE
This project is licensed under the MIT License.
Development by: André Coelho
1.2.0
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.15
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.9
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.12
5 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago