1.3.0 • Published 6 years ago

react-skeletons v1.3.0

Weekly downloads
1
License
MIT
Repository
-
Last release
6 years ago

minifed size minzip size npm version

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

PropTypeDescriptionDefault
countNumberHow many lines should be rendered3
animatedBooleanShould the skeleton be animatedtrue

Line

PropTypeDescriptionDefault
animatedBooleanShould the line be animatedtrue

Box

PropTypeDescriptionDefault
animatedBooleanShould the line be animatedtrue
autoBooleanFill container; set's width and height to 100%false
heightNumberHeight of box (in px)72
widthNumberWidth of box (in px)72

SkeletonTheme

PropTypeDescriptionDefault
colorStringBackground color#F2F2F2
highlightStringPrimary color#E3E3E3
1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago