react-js-skeleton
v0.4.1
Published
Init skeleton react js
Downloads
6
Maintainers
Readme
react-loading-skeleton
OLA K ACE Make beautiful, animated loading skeletons that automatically adapt to your app.
Basic usage
Install by npm
/yarn
with react-loading-skeleton
.
import Skeleton from 'react-loading-skeleton';
<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton
Principles
Adapts to the styles you have defined
The <Skeleton>
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 <Skeleton>
component to have it automatically fill the correct dimensions.
For example:
class Blogpost extends Component {
render() {
return (
<div style={{fontSize: 20, lineHeight: 2}}>
<h1>{this.props.title || <Skeleton/>}</h1>
{this.props.body || <Skeleton count={10}/>}
</div>
);
}
}
...will produce the correctly-sized skeletons for the heading and body sections
without any further configuration of the <Skeleton>
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:
- Components represent all possible states it can be in - loading included.
- It allows for more flexible loading patterns - in the
Blogpost
example, it's possible to have thetitle
load first, and then thebody
, while having both pieces of content show loading skeletons at the right time.
Theming
Using a <SkeletonTheme>
component, you can easily change the colors of all
skeleton components below it in the React hierarchy:
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
<SkeletonTheme color="#202020" highlightColor="#444">
<p>
<Skeleton count={3} />
</p>
</SkeletonTheme>
##Images:
Use: <SkeletonImg>
and send props:
defaultProps = {
img: null,
wrapper: null,
setClassSkeleton: " ",
setClass: " ",
heightSkeleton: '100px',
height: " ",
widthSkeleton: "100%",
width: "",
title: " ",
alt: " "
};