1.2.0 • Published 2 years ago

react-skeleton-loader-pulse v1.2.0

Weekly downloads
18
License
MIT
Repository
github
Last release
2 years ago

React Skeleton Loader Pulse Component

Skeleton Loader Pulse for ReactJS

Demo

Install

npm install react-skeleton-loader-pulse

or

yarn add react-skeleton-loader-pulse

Usage

SkeletonItem

import React from "react";
import { SkeletonItem } from "react-skeleton-loader-pulse";

export default function Component() {
  return <SkeletonItem />;
}

Props

propertypropTyperequireddefaultdescription
colorstring | undefined-#cccSkeleton color
pulseTimenumber | undefined-1pulse time in seconds
widthstring | number | undefined-100%width container component
heightstring | number | undefined-10pxheight container component
marginTopstring | number | undefined-0margin top component
marginBottomstring | number | undefined-0margin bottom component
marginLeftstring | number | undefined-0margin left component
marginRightstring | number | undefined-0margin right component
borderRadiusstring | number | undefined-0border 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

propertypropTyperequireddefaultdescription
colorstring | undefined-#cccSkeleton color
pulseTimenumber | undefined-1pulse time
widthstring | number | undefined-100%width container component
direction"column" | "row" | undefined-columnflex-direction of layout
align"center" | "left" | "right" | undefined-leftalign items of layout
itemsItem[]yes-Layout: Array of objects

Props array Item

propertypropTyperequireddefaultdescription
heightnumber | stringyes-height
widthnumber | string | undefined-100%widtt
borderRadiusnumber | string | undefined-0border radius
marginBottomnumber | string | undefined-3pxmargin bottom
marginTopnumber | string | undefined-3pxmargin top
marginLeftnumber | string | undefined-0margin left
marginRightnumber | string | undefined-0margin right

LICENSE

This project is licensed under the MIT License.

Development by: André Coelho

1.2.0

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.9

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.12

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago