Generate amazing and animated loading skeletons that will automate and help your work.
npm install react-skeleton-generatorGenerate amazing and animated loading skeletons that will automate and help your work.
!GitHub Logo
!GitHub Logo
!GitHub Logo
!GitHub Logo
Installed by npm/yarn with react-skeleton-generator.
``javascript
import { Skeleton } from 'react-skeleton-generator';
`
Common props you may want to specify include:
- ## ``color
- ### Color
: String, defaults to #F1EFF1
`javascript`
The color of skeleton, the animation color will be generated automatically depending on the passed color, it can be lighter or darker (generate automatically).
- ### Animation
animation: 'opacity' | 'shimmer', defaults to 'shimmer'
`javascript`
There are two types of effects, shimmer is like an wave and opacity will appear and disappear.
- ### Animation Duration
animationDuration: Number, defaults to 1
`javascript`
How long it takes do one cycle of the skeleton animation.
- ### Highlight
highlight: 'light' | 'dark' | undefined, defaults to undefined
`javascript`
There are two types, if passed the light or dark value it will override the skeleton color value, and the animation color will be based on this prop (darker or lighter).
- ### Style
style: React.CSSProperties, defaults to undefined
`javascript`
Free style when it's possible add any style here.
- ### Children
children: React.ReactNode
`javascript`
it will used to add the skeleton here.
- ### DataTestId
dataTestId: String, defaults to SkeletonThemeProvider
`javascript`
used for test component.
- ## ``width
- ### Width
: String, defaults to 100%
`javascript`
Used to set the width of skeleton.
- ### Height
height: String, defaults to 30px
`javascript`
Used to set the width of skeleton.
- ### BorderRadius
borderRadius: String, defaults to 4px
`javascript`
Used to set the borderRadius of skeleton.
- ### Count
count: Number, defaults to 1
`javascript`
Used to set how many lines will be generate.
- ### SpaceBetween
spaceBetween: String, defaults to 10px
`javascript`
Used to set the space that will be generate each lines if count > 1
- ### WidthMultiple
widthMultiple: String, defaults to undefined
`javascript`
Used to set the width for each skeleton if count > 1
- ### HeightMultiple
heightMultiple: String, defaults to undefined
`javascript`
Used to set the height for each skeleton if count > 1
- ### DataTestId
dataTestId: String, defaults to Skeleton
`javascript`
used for test component.
Used to set the width of skeleton.
react-skeleton-generator need zero configuration, it is only install and use.
To generate an skeleton loader like the image below, here is an example for you:
`javascript
import { Skeleton } from 'react-skeleton-generator';
height="50px"
borderRadius="50%"
/>
count={3}
widthMultiple={['100%', '50%', '75%']}
heightMultiple={['50px', '20px', '15px']}
/>
height="50px"
borderRadius="10px"
/>
MIT