react-skeleton-generator
Generate amazing and animated loading skeletons that will automate and help your work.
Coverage reports
Basic usage
Installed by npm
/yarn
with react-skeleton-generator
.
import { Skeleton } from 'react-skeleton-generator';
<Skeleton.SkeletonThemeProvider>
<Skeleton width="50px" height="50px" borderRadius="50%" /> // Simple, generated single line circle skeleton
<Skeleton count={3} widthMultiple={['100%', '50%', '75%']} heightMultiple={['50px', '20px', '15px']} /> // Three skeleton lines
</Skeleton.SkeletonThemeProvider>
Props
Common props you may want to specify include:
-
<Skeleton.SkeletonThemeProvider />
-
color
: String, defaults to #F1EFF1<Skeleton.SkeletonThemeProvider color="#C0C0C0" />
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
: 'opacity' | 'shimmer', defaults to 'shimmer'<Skeleton.SkeletonThemeProvider animation="opacity" />
There are two types of effects,
shimmer
is like an wave andopacity
will appear and disappear. -
animationDuration
: Number, defaults to 1<Skeleton.SkeletonThemeProvider animationDuration={3} />
How long it takes do one cycle of the skeleton animation.
-
highlight
: 'light' | 'dark' | undefined, defaults to undefined<Skeleton.SkeletonThemeProvider highlight="dark" />
There are two types, if passed the
light
ordark
value it will override the skeleton color value, and the animation color will be based on this prop (darker or lighter). -
style
: React.CSSProperties, defaults to undefined<Skeleton.SkeletonThemeProvider style={{ padding: '10px' }} />
Free style when it's possible add any style here.
-
children
: React.ReactNode<Skeleton.SkeletonThemeProvider> <Skeleton /> </Skeleton.SkeletonThemeProvider>
it will used to add the skeleton here.
-
dataTestId
: String, defaults to SkeletonThemeProvider<Skeleton.SkeletonThemeProvider dataTestId="anyTestId" />
used for test component.
-
-
<Skeleton />
width
: String, defaults to 100%<Skeleton width="80%" />
Used to set the width of skeleton.
height
: String, defaults to 30px<Skeleton height="500px" />
Used to set the width of skeleton.
borderRadius
: String, defaults to 4px<Skeleton borderRadius="10px" />
Used to set the borderRadius of skeleton.
count
: Number, defaults to 1<Skeleton count={3} />
Used to set how many lines will be generate.
spaceBetween
: String, defaults to 10px<Skeleton spaceBetween="20px" />
Used to set the space that will be generate each lines if
count > 1
widthMultiple
: String, defaults to undefined<Skeleton widthMultiple=["100px", "200px", "300px"] />
Used to set the width for each skeleton if
count > 1
heightMultiple
: String, defaults to undefined<Skeleton heightMultiple=["100px", "200px", "300px"] />
Used to set the height for each skeleton if
count > 1
-
dataTestId
: String, defaults to Skeleton<Skeleton dataTestId="anyTestId" />
used for test component.
Used to set the width of skeleton.
-
Example
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:
import { Skeleton } from 'react-skeleton-generator';
<Skeleton.SkeletonThemeProvider>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Skeleton
width="50px"
height="50px"
borderRadius="50%"
/>
<div style={{ width: '400px' }}>
<Skeleton
borderRadius="10px"
count={3}
widthMultiple={['100%', '50%', '75%']}
heightMultiple={['50px', '20px', '15px']}
/>
</div>
</div>
<div style={{ marginTop: '20px' }}>
<Skeleton
borderRadius="10px"
count={3}
widthMultiple={['100%', '100%', '80%']}
heightMultiple={['20px', '20px', '20px']}
/>
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px' }}>
<Skeleton
width="48%"
height="50px"
borderRadius="10px"
/>
<Skeleton
width="48%"
height="50px"
borderRadius="10px"
/>
</div>
</Skeleton.SkeletonThemeProvider>
License
MIT