react-skeleton-blocks v1.1.1
react-skeleton-blocks
Set of React Skeleton UI components for loading content
Demo
https://codepen.io/stefandunn/full/RwRpWYJ
Install
npm 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.
import React, {useState, useEffect} from 'react'
import {
SkeletonText
} from 'react-skeleton-blocks'
class Example extends Component {
const [content, setContent] = useState(null);
useEffect(() => {
// Content will show after 2 seconds
setTimeout(() => {
setContent("Hello world!");
}, 2000);
}, []);
render() {
return <SkeletonText>{content}</SkeletonText>
}
}
Paragraphs
The below example will render a skeleton-ui paragraph component, similar to above but with multiple lines.
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {
SkeletonParagraph
} from 'react-skeleton-blocks'
class Example extends Component {
const [paragraph, setParagraph] = useState(null);
useEffect(() => {
axios
.get(
'https://baconipsum.com/api/?type=all-meat¶s=1&start-with-lorem=1&format=html'
)
.then(res => {
setParagraph(<div dangerouslySetInnerHTML={{ __html: res.data }}></div>)
})
}, []);
render() {
return <SkeletonParagraph>{content}</SkeletonParagraph>
}
}
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.
import React from 'react'
import { SkeletonImage } from 'react-skeleton-blocks'
class Example extends Component {
render() {
return (
<SkeletonImage
width='600'
height='300'
src='https://source.unsplash.com/random/600x300'
alt='Preloaded from Unsplash'
/>
)
}
}
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.
import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {
SkeletonMultiBlocks
} from 'react-skeleton-blocks'
class Example extends Component {
const [paragraph, setParagraph] = useState(null);
useEffect(() => {
axios
.get(
'https://baconipsum.com/api/?type=all-meat¶s=1&start-with-lorem=1&format=html'
)
.then(res => {
setParagraph(<div dangerouslySetInnerHTML={{ __html: res.data }}></div>)
})
}, []);
render() {
return (
<>
<SkeletonMultiBlocks blocks={3}>{content}</SkeletonMultiBlocks>
<SkeletonMultiBlocks blocks={4} noImages={true}>{content}</SkeletonMultiBlocks>
</>
);
}
}
Avatar
A simple skeleton-ui component which displays a circular shape until an image is ready to be shown (after it's loaded).
import React from 'react'
import { SkeletonAvatar } from 'react-skeleton-blocks'
class Example extends Component {
render() {
return (
<SkeletonAvatar
radius='80'
src='https://source.unsplash.com/random/100x100'
alt='Preloaded from Unsplash'
/>
)
}
}
Shapes
skeleton-ui comes with 3 types of shapes, Rectangle, Square and Circle.
import React from 'react'
import { SkeletonCircle, SkeletonRectangle, SkeletonSquare } from 'react-skeleton-blocks'
class Example extends Component {
render() {
return (
<SkeletonCircle radius={100} />
<SkeletonRectangle style={{width: 200, height: 100}} />
<SkeletonSquare width={100} />
)
}
}
Props
Shared Props
speed
prop determines the animation speed of the gradient fade in seconds, default is3
.inheritClass
prop specified the parent class for any skeleton-ui component, default isskeleton-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, whentrue
the content is shown, defaultnull
.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, default100
height
prop determines the height (px) of the image, default100
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, default40
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, default100%
SkeletonParagraph
width
prop determines the width (px) of the text block, usually as a percentage, default100%
linesPerParagraph
prop determines the number of lines for the paragraph skeleton-ui component, default3
SkeletonImageParagraph
lineWidth
prop determines the width of the text block, usually as a percentage, default100%
imageWidth
prop determines the width (px) of image to represent in the skeleton-ui component, default100
linesPerParagraph
prop determines the number of lines for the paragraph skeleton-ui component, default3
SkeletonTextBlock
width
prop determines the width of the text block, usually as a percentage, default100%
paragraphs
prop determines the number of paragraphs to represent in the skeleton-ui component, default3
linesPerParagraph
prop determines the number of lines for the paragraph skeleton-ui component, default3
SkeletonMultiBlock
width
prop determines the width of the multi-block, usually as a percentage, default100%
noImages
prop determines if images should NOT be represented in the skeleton-ui component, defaultfalse
blocks
prop determines the number of blocks to represent in the skeleton-ui component, default3
linesPerParagraph
prop determines the number of lines for the paragraph skeleton-ui component, default3
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:
ReactDOM.render(
<ReactSkeletonBlocks.SkeletonAvatar
radius='80'
src='https://source.unsplash.com/random/100x100'
alt='Preloaded from Unsplash'
/>,
document.getElementById('root')
)
License
MIT © stefandunn