react-skeletons v1.3.0

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

Line

Box

SkeletonTheme