1.2.0 • Published 2 years ago

react-native-skeleton-loader-pulse v1.2.0

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

React Native Skeleton Loader Pulse Component

Skeleton Loader Pulse for React Native

Demo

Install

npm install react-native-skeleton-loader-pulse

ou

yarn add react-native-skeleton-loader-pulse

Usage

SkeletonItem

import React from "react";
import { SkeletonItem } from "react-native-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
borderRadiusnumber | undefined-0border radius component

SkeletonLayout

import React from "react";
import { SkeletonLayout } from "react-native-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 | 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.8

3 years ago

1.0.84

3 years ago

1.0.83

3 years ago

1.0.82

3 years ago

1.0.81

3 years ago

1.0.88

3 years ago

1.0.87

3 years ago

1.0.86

3 years ago

1.0.85

3 years ago

1.0.89

3 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.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago