https://github.com/jbkuczma/react-skeletons

Lightweight package for creating beautiful loading skeletons for your app
https://github.com/jbkuczma/react-skeletons

loading-animations react react-skeleton

Last synced: 3 months ago
JSON representation

Lightweight package for creating beautiful loading skeletons for your app

• Host: GitHub
• URL: https://github.com/jbkuczma/react-skeletons
• Owner: jbkuczma
• License: mit
• Created: 2019-07-04T13:42:20.000Z (about 7 years ago)
• Default Branch: develop
• Last Pushed: 2019-08-04T16:01:51.000Z (almost 7 years ago)
• Last Synced: 2026-03-24T04:31:39.596Z (4 months ago)
• Topics: loading-animations, react, react-skeleton
• Language: JavaScript
• Homepage:
• Size: 19.5 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![minifed size](https://img.shields.io/bundlephobia/min/react-skeletons.svg?style=flat-square)]()

[![minzip size](https://img.shields.io/bundlephobia/minzip/react-skeletons.svg?style=flat-square)]()

[![npm version](https://badge.fury.io/js/react-skeletons.svg)]()

# react-skeletons

Create beautiful and animated loading skeletons as your views load

## Installation

```bash

  npm install --save react-skeletons

```

## Basic usage

```jsx

  import Skeleton from 'react-skeletons';

  

```

## Advanced usage

```jsx

  import React from 'react';

  import Skeleton, { Box, Line } from 'react-skeletons;

  const Grid = ({ ...props }) => (

    


      {props.children}

    

  );


  

    

      {[0, 1, 2].map((_, index) =>

        


          

          

        

      )}

    

  

```


View the storybook to see other possible configurations

```bash

  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 |