@riyazurrazak/react-skeleton

react-skeleton

React based Skeleton animation component with full customisable themes.

Install

with npm

npm install --save @riyazurrazak/react-skeleton

with yarn

yarn add @riyazurrazak/react-skeleton

Example

CodeSandBox : Demo

Usage

import React from 'react'

import {SkeletonWrapper} from '@riyazurrazak/react-skeleton'

export const Example = ()=>{

  return(
     <SkeletonWrapper isLoading={true}>
          {/** inner content */}
          <p>Async content</p>  
     </SkeletonWrapper>
  )
}

Props

Property	Type	Default	Description
isLoading	bool	false	Set true to loading effect. Set false to render elements inside the SkeletonWrapper
className	string	null	Custom class to make the skeleton to style as you want
width	string	'auto'	width of your skeleton
height	string	'auto'	height of your skeleton
circle	bool	false	make skeleton as circle. Note: width and height must be eqaul
wave	bool	false	make skeleton as wave animation
backgroundColor	string	rgba(0, 0, 0, 0.11)	background of the skeleton
highlightColor	string	rgba(0, 0, 0, 0.04)	highlightedcolor of the skeleton. Will be effect if wave property is true

License

MIT © RiyazurRazak