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-stateyarn add react-skeleton-stateUsage
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 |