react-skeleton-blocks

Set of React Skeleton UI components for loading content

Demo

https://codepen.io/stefandunn/full/RwRpWYJ

Install

1npm install --save react-skeleton-blocks

Usage

Text

The below example will render a skeleton-ui text component until the child component (in this case, a string) is available. The example sets a default content value of {null} and after 2 seconds, it will set the content to "Hello world!" which will in-turn remove the skeleton-ui component and replace with actual content.

1import React, {useState, useEffect} from 'react'
2
3import {
4  SkeletonText
5} from 'react-skeleton-blocks'
6
7class Example extends Component {
8
9  const [content, setContent] = useState(null);
10
11  useEffect(() => {
12
13    // Content will show after 2 seconds
14    setTimeout(() => {
15      setContent("Hello world!");
16    }, 2000);
17
18  }, []);
19
20  render() {
21    return <SkeletonText>{content}</SkeletonText>
22  }
23}

Paragraphs

The below example will render a skeleton-ui paragraph component, similar to above but with multiple lines.

1import React, {useState, useEffect} from 'react'
2import axios from 'axios'
3
4import {
5  SkeletonParagraph
6} from 'react-skeleton-blocks'
7
8class Example extends Component {
9
10  const [paragraph, setParagraph] = useState(null);
11
12  useEffect(() => {
13
14    axios
15      .get(
16        'https://baconipsum.com/api/?type=all-meat&paras=1&start-with-lorem=1&format=html'
17      )
18      .then(res => {
19        setParagraph(<div dangerouslySetInnerHTML={{ __html: res.data }}></div>)
20      })
21
22  }, []);
23
24  render() {
25    return <SkeletonParagraph>{content}</SkeletonParagraph>
26  }
27}

Images

The below example will render a skeleton-ui image component, which is a rectangular block which will be replaced with the image after it's finished loading. The SkeletonImage component takes the same attributes as an <img> does anf treats them the same.

1import React from 'react'
2
3import { SkeletonImage } from 'react-skeleton-blocks'
4
5class Example extends Component {
6  render() {
7    return (
8      <SkeletonImage
9        width='600'
10        height='300'
11        src='https://source.unsplash.com/random/600x300'
12        alt='Preloaded from Unsplash'
13      />
14    )
15  }
16}

Multi-block

The below example will render a skeleton-ui multi-block component, which is rendered as one or more blocks of mixed paragraph and image content. The example below will render 3 blocks, each block will contain a SkeletonParagraph and SkeletonImage component side-by side. You can set prop noImages={true} to render a multi-block of just paragraph skeletons.

1import React, {useState, useEffect} from 'react'
2import axios from 'axios'
3
4import {
5  SkeletonMultiBlocks
6} from 'react-skeleton-blocks'
7
8class Example extends Component {
9
10  const [paragraph, setParagraph] = useState(null);
11
12  useEffect(() => {
13
14    axios
15      .get(
16        'https://baconipsum.com/api/?type=all-meat&paras=1&start-with-lorem=1&format=html'
17      )
18      .then(res => {
19        setParagraph(<div dangerouslySetInnerHTML={{ __html: res.data }}></div>)
20      })
21
22  }, []);
23
24  render() {
25    return (
26      <>
27        <SkeletonMultiBlocks blocks={3}>{content}</SkeletonMultiBlocks>
28        <SkeletonMultiBlocks blocks={4} noImages={true}>{content}</SkeletonMultiBlocks>
29      </>
30    );
31  }
32}

Avatar

A simple skeleton-ui component which displays a circular shape until an image is ready to be shown (after it's loaded).

1import React from 'react'
2
3import { SkeletonAvatar } from 'react-skeleton-blocks'
4
5class Example extends Component {
6  render() {
7    return (
8      <SkeletonAvatar
9        radius='80'
10        src='https://source.unsplash.com/random/100x100'
11        alt='Preloaded from Unsplash'
12      />
13    )
14  }
15}

Shapes

skeleton-ui comes with 3 types of shapes, Rectangle, Square and Circle.

1import React from 'react'
2
3import { SkeletonCircle, SkeletonRectangle, SkeletonSquare } from 'react-skeleton-blocks'
4
5class Example extends Component {
6  render() {
7    return (
8	  <SkeletonCircle radius={100} />
9	  <SkeletonRectangle style={{width: 200, height: 100}} />
10	  <SkeletonSquare width={100} />
11    )
12  }
13}

Props

Shared Props

• speed prop determines the animation speed of the gradient fade in seconds, default is 3.
• inheritClass prop specified the parent class for any skeleton-ui component, default is skeleton-ui-component.
• style prop is applied to any component in the same way React uses the prop to style elements, default {}.
• hideWhen prop (not applicable to shapes) is a forceful way of removing the skeleton-ui component and replacing it with content, when true the content is shown, default null.
• className prop, much like React, is used to specify a class attribute to a skeleton-ui component, default ''

SkeletonImage

• width prop determines the width (px) of the image, default 100
• height prop determines the height (px) of the image, default 100
• src prop determines the URL of the image, default ''
• alt prop will display the alt attribute with the props value as the alt attribute's value, default ''

SkeletonAvatar

• radius prop determines the radius of the circular avatar image, default 40
• src prop determines the URL of the image, default ''
• alt prop will display the alt attribute with the props value as the alt attribute's value, default ''

SkeletonText

• width prop determines the width (px) of the text block, usually as a percentage, default 100%

SkeletonParagraph

• width prop determines the width (px) of the text block, usually as a percentage, default 100%
• linesPerParagraph prop determines the number of lines for the paragraph skeleton-ui component, default 3

SkeletonImageParagraph

• lineWidth prop determines the width of the text block, usually as a percentage, default 100%
• imageWidth prop determines the width (px) of image to represent in the skeleton-ui component, default 100
• linesPerParagraph prop determines the number of lines for the paragraph skeleton-ui component, default 3

SkeletonTextBlock

• width prop determines the width of the text block, usually as a percentage, default 100%
• paragraphs prop determines the number of paragraphs to represent in the skeleton-ui component, default 3
• linesPerParagraph prop determines the number of lines for the paragraph skeleton-ui component, default 3

SkeletonMultiBlock

• width prop determines the width of the multi-block, usually as a percentage, default 100%
• noImages prop determines if images should NOT be represented in the skeleton-ui component, default false
• blocks prop determines the number of blocks to represent in the skeleton-ui component, default 3
• linesPerParagraph prop determines the number of lines for the paragraph skeleton-ui component, default 3

UMD Distribution Usage

All blocks are distributed under the ReactSkeletonBlocks scope attached to the browser's window.

Package

You can point to the react-skeleton-blocks.umd.js file within a <script> tag:

<script src"./dist/react-skeleton-blocks.umd.js"></script>

Using Blocks

Very similar to the above samples, but you will need to specify the scope, ReactSkeletonBlocks, so for example:

1ReactDOM.render(
2  <ReactSkeletonBlocks.SkeletonAvatar
3    radius='80'
4    src='https://source.unsplash.com/random/100x100'
5    alt='Preloaded from Unsplash'
6  />,
7  document.getElementById('root')
8)

License

MIT © stefandunn