https://github.com/Jrschellenberg/peact-loading-skeleton

Fork of React-Loading-Skeleton to be ported for Preact Projects
https://github.com/Jrschellenberg/peact-loading-skeleton

Last synced: 8 days ago
JSON representation

Fork of React-Loading-Skeleton to be ported for Preact Projects

• Host: GitHub
• URL: https://github.com/Jrschellenberg/peact-loading-skeleton
• Owner: Jrschellenberg
• License: mit
• Created: 2019-04-15T00:04:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-15T00:11:10.000Z (over 5 years ago)
• Last Synced: 2024-10-28T13:58:02.092Z (16 days ago)
• Language: JavaScript
• Size: 315 KB
• Stars: 1
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# peact-loading-skeleton

This is a Port from react-loading-skeleton.

All Credit goes to original author. To see Project please go [here](https://github.com/dvtng/react-loading-skeleton)

Make beautiful, animated loading skeletons that automatically adapt to your app.

![Gif of skeleton in action](https://media.giphy.com/media/l0Iyk4bAAjac3AU2k/giphy.gif)

## Basic usage

Install by `npm`/`yarn` with `react-loading-skeleton`.

```javascript

import Skeleton from 'react-loading-skeleton';

 // Simple, single-line loading skeleton

 // Five-line loading skeleton

```

## Principles

### Adapts to the styles you have defined

The `` component is designed to be used directly in your components,

in place of content while it's still loading.

Unlike other libraries, rather than meticulously crafting a skeleton screen to

match the `font-size`, `line-height` or `margin`s your content takes on,

use a `` component to have it automatically fill the correct dimensions.

For example:

```javascript

class Blogpost extends Component {

  render() {

    return (

      


        
{this.props.title || }

        {this.props.body || }

      

    );

  }

}

```


...will produce the correctly-sized skeletons for the heading and body sections

without any further configuration of the `` component.

This ensures the loading state remains up-to-date with any changes

to your layout or typography.

### Don't make dedicated skeleton screens

Instead, make components with _built-in_ skeleton states.

In addition to keeping the styling in-sync, here are some other reasons to do this:

1.  Components represent all possible states it can be in - loading included.

1.  It allows for more flexible loading patterns - in the `Blogpost` example, it's possible to have the `title` load first, and then the `body`, while having both pieces of content show loading skeletons at the right time.

## Theming

Using a `` component, you can easily change the colors of all

skeleton components below it in the React hierarchy:

```javascript

import Skeleton, { SkeletonTheme } from "react-loading-skeleton";

  


    

  

;

```


## Duration

```javascript

```

`duration`: Number, defaults to 1.2

Duration is how long it takes do one cycle of the skeleton animation.

## Width

`width`: Number | String | null, defaults to null

```javascript

```

Width of the skeleton. Useful when the skeleton is inside an inline element with

no width of its own.

## Height

`Height`: Number | String | null, defaults to null

```javascript

```

Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance

a card. Also needed for the prop `circle` (see below).

## Circle

`Circle`: Boolean | false, defaults to false

```javascript

```

Prop for making the skeleton look like a circle, for when you are creating a user card with a profile picture for instance.