react-skeleton-state

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