React-skeleton-generator NPM

react-skeleton-generator

Generate amazing and animated loading skeletons that will automate and help your work.

Gif of skeleton in action

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
  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
  animation: 'opacity' | 'shimmer', defaults to 'shimmer'
```
<Skeleton.SkeletonThemeProvider animation="opacity" />
```
  There are two types of effects, shimmer is like an wave and opacity will appear and disappear.
- Animation Duration
  animationDuration: Number, defaults to 1
```
<Skeleton.SkeletonThemeProvider animationDuration={3} />
```
  How long it takes do one cycle of the skeleton animation.
- Highlight
  highlight: 'light' | 'dark' | undefined, defaults to undefined
```
<Skeleton.SkeletonThemeProvider highlight="dark" />
```
  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
```
<Skeleton.SkeletonThemeProvider style={{ padding: '10px' }} />
```
  Free style when it's possible add any style here.
- Children
  children: React.ReactNode
```
<Skeleton.SkeletonThemeProvider>
  <Skeleton />
</Skeleton.SkeletonThemeProvider>
```
  it will used to add the skeleton here.
- DataTestId
  dataTestId: String, defaults to SkeletonThemeProvider
```
<Skeleton.SkeletonThemeProvider dataTestId="anyTestId" />
```
  used for test component.
<Skeleton />
- Width
  width: String, defaults to 100%
```
<Skeleton width="80%" />
```
Used to set the width of skeleton.
- Height
  height: String, defaults to 30px
```
<Skeleton height="500px" />
```
Used to set the width of skeleton.
- BorderRadius
  borderRadius: String, defaults to 4px
```
<Skeleton borderRadius="10px" />
```
Used to set the borderRadius of skeleton.
- Count
  count: Number, defaults to 1
```
<Skeleton count={3} />
```
Used to set how many lines will be generate.
- SpaceBetween
  spaceBetween: String, defaults to 10px
```
<Skeleton spaceBetween="20px" />
```
Used to set the space that will be generate each lines if count > 1
- WidthMultiple
  widthMultiple: String, defaults to undefined
```
<Skeleton widthMultiple=["100px", "200px", "300px"] />
```
Used to set the width for each skeleton if count > 1
- HeightMultiple
  heightMultiple: String, defaults to undefined
```
<Skeleton heightMultiple=["100px", "200px", "300px"] />
```
Used to set the height for each skeleton if count > 1
- DataTestId
  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:

GitHub Logo

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>