react-skeleton-generator

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

!Gif of skeleton in action

Coverage reports

!GitHub Logo
!GitHub Logo
!GitHub Logo
!GitHub Logo

Basic usage

Installed by npm/yarn with react-skeleton-generator.

``javascript
import { Skeleton } from 'react-skeleton-generator';


// Simple, generated single line circle skeleton
// Three skeleton lines

`

Props

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.

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

`javascript
import { Skeleton } from 'react-skeleton-generator';

License

MIT