react-skeleton-generator

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

    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:

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