1.0.3 • Published 2 years ago
react-skeleton-state v1.0.3
React Skeleton
Show a loading skeleton of your content animated before your content arrived from e.g. API or lazy loading
Installation
npm install --save react-skeleton-state
yarn add react-skeleton-state
Usage
import ReactSkeleton from "react-skeleton-state";
<ReactSkeleton width={200} fontSize={"1rem"} variant="text"></ReactSkeleton>
<ReactSkeleton width={50} height={50} variant="circle"></ReactSkeleton>
<ReactSkeleton width={200} fontSize={"1rem"} variant="text"></ReactSkeleton>
<ReactSkeleton width={200} height={200} variant="rectangle"></ReactSkeleton>
Props
Prop | Type | Default | Description |
---|---|---|---|
width | number | 4 | The width of the skeleton PX |
height | number | 4 | The height of your skeleton PX |
variant | string | "rectangle" | Either "rectangle", "circle" or "text" |
fontSize | string | null | fontSize if variant is text |
borderRadius | number | 4 | Border radius of the skeleton PX |
backgroundColorStart | string | "#efefef" | Start color state for animation |
backgroundColorEnd | string | "#e4e4e4" | End color state for animation |
children | reactNode | null | Include any react children |