react-skeletons
v1.3.0
Published
Beautiful, animated loading skeletons to show while your view loads
Downloads
6
Maintainers
Readme
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 count={4} />
Advanced usage
import React from 'react';
import Skeleton, { Box, Line } from 'react-skeletons;
const Grid = ({ ...props }) => (
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 200px)',
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 |