Socket
Socket
Sign inDemoInstall

@s-ui/react-atom-skeleton

Package Overview
Dependencies
5
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@s-ui/react-atom-skeleton

Display the loading state of a component while avoding layout shift


Version published
Maintainers
1
Weekly downloads
2,683
increased by26.8%

Weekly downloads

Readme

Source

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.

FAQs

Last updated on 06 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc