1.2.0 • Published 3 years ago

react-skeleton-loader-pulse v1.2.0

Weekly downloads
18
License
MIT
Repository
github
Last release
3 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

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.21

3 years ago

1.0.20

3 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

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago