Package Exports

@s-ui/react-atom-skeleton
@s-ui/react-atom-skeleton/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@s-ui/react-atom-skeleton) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.