react-skeletons
Create beautiful and animated loading skeletons as your views load
Installation
npm install --save react-skeletons
Basic usage
import Skeleton from 'react-skeletons'; <Skeleton = />
Advanced usage
import React from 'react'; import Skeleton Box Line from 'react-skeletons; const Grid = ({ ...props }) => ( <div style={{ display: 'grid', gridTemplateColumns: '', gridColumnGap: 16 }}> {props.children} </div> ); <SkeletonTheme color='#FF4E50' highlight='#F9D423'> <Grid> {[0, 1, 2].map((_, index) => <div key={index} style={{ width: 210 }}> <Box width={210} height={120} /> <Skeleton count={2} /> </div> )} </Grid> </SkeletonTheme>
View the storybook to see other possible configurations
npm run storybook
Components
Skeleton
Prop | Type | Description | Default |
---|---|---|---|
count | Number | How many lines should be rendered | 3 |
animated | Boolean | Should the skeleton be animated | true |
Line
Prop | Type | Description | Default |
---|---|---|---|
animated | Boolean | Should the line be animated | true |
Box
Prop | Type | Description | Default |
---|---|---|---|
animated | Boolean | Should the line be animated | true |
auto | Boolean | Fill container; set's width and height to 100% |
false |
height | Number | Height of box (in px) | 72 |
width | Number | Width of box (in px) | 72 |
SkeletonTheme
Prop | Type | Description | Default |
---|---|---|---|
color | String | Background color | #F2F2F2 |
highlight | String | Primary color | #E3E3E3 |