@s-ui/react-atom-skeleton
v1.6.0
Published
Display the loading state of a component while avoding layout shift
Downloads
8,091
Maintainers
Keywords
Readme
AtomSkeleton
Skeleton is used to display the loading state of a component while avoiding layout shift.
Installation
$ npm install @s-ui/react-atom-skeleton
Usage
Basic usage
Import package and use the component
import AtomSkeleton from '@s-ui/react-atom-skeleton'
return (<AtomSkeleton />)
Import the styles (Sass)
@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-atom-skeleton/lib/index';
Variant
Use variant
prop to shape the skeleton and make it look like the final user interface. Choose between round
, square
and circle
.
import AtomSkeleton, {ATOM_SKELETON_VARIANTS} from '@s-ui/react-atom-skeleton'
const VariantStory = () => (
<>
<AtomSkeleton variant={ATOM_SKELETON_VARIANTS.circle} />
<AtomSkeleton variant={ATOM_SKELETON_VARIANTS.round} />
<AtomSkeleton variant={ATOM_SKELETON_VARIANTS.square} />
</>
);
Size
While the width
and height
props could be set, it was made to be used directly in your components.
import AtomSkeleton from '@s-ui/react-atom-skeleton'
const SizeStory = () => (
<>
<AtomSkeleton height="16px" />
<h2>
<AtomSkeleton />
</h2>
</>
);
Animation
Use animation
prop to choose between wave
and pulse
animation, if the prop is set to false
the component won't have any.
import AtomSkeleton, {ATOM_SKELETON_ANIMATIONS} from '@s-ui/react-atom-skeleton'
const AnimationStory = () => (
<>
<AtomSkeleton animation={ATOM_SKELETON_ANIMATIONS.wave} />
<AtomSkeleton animation={ATOM_SKELETON_ANIMATIONS.pulse} />
<AtomSkeleton animation={false} />
</>
);
Count
Use count
prop to display several skeletons
const CountStory = () => (
<>
<AtomSkeleton count={4} />
</>
);
Find full description and more examples in the demo page.