SkeletonContainer

How to use SkeletonContainer

The SkeletonContainer component is a wrapper component of the all other skeleton components: SkeletonBodyText, SkeletonDisplayText, SkeletonImage, SkeletonRow

Use can use properties of SkeletonContainer to control color, background color, animation, opacity of the skeleton elements that are used inside.

Import

import { SkeletonContainer } from '@contentful/f36-components';
// or
import { SkeletonContainer } from '@contentful/f36-skeleton';

Code examples

<SkeletonContainer>
  <SkeletonBodyText numberOfLines={4} />
</SkeletonContainer>
<SkeletonContainer>
  <SkeletonBodyText numberOfLines={4} />
</SkeletonContainer>
Hide source

An example with a different color and an increased speed.

<SkeletonContainer backgroundColor="red" speed={1}>
  <SkeletonBodyText numberOfLines={2} />
</SkeletonContainer>
<SkeletonContainer backgroundColor="red" speed={1}>
  <SkeletonBodyText numberOfLines={2} />
</SkeletonContainer>
Hide source

Props

• Name

  children(required)

  ReactNode
• Name

  animateId

  string
• Name

  ariaLabel

  Description

  Label attribute

  string

  Default

  Loading component...
• Name

  backgroundColor

  Description

  Background color of the skeleton

  string

  Default

  #e5ebed
• Name

  backgroundOpacity

  Description

  Background opacity of the skeleton

  number

  Default

  1
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  clipId

  string
• Name

  foregroundColor

  Description

  Color of the foreground skeleton items

  string

  Default

  #f7f9fa
• Name

  foregroundOpacity

  Description

  Opacity of the foreground skeleton items

  number

  Default

  1
• Name

  gradientId

  string
• Name

  height

  string

  number

  Default

  100%
• Name

  isAnimated

  Description

  Whether skeleton has animation or not

  false

  true

  Default

  true
• Name

  preserveAspectRatio

  string
• Name

  speed

  Description

  Speed of the animation

  string

  number

  Default

  2
• Name

  svgHeight

  Description

  Height of the SVG element

  string

  number

  Default

  100%
• Name

  svgWidth

  Description

  Width of the SVG element

  string

  number

  Default

  100%
• Name

  testId

  Description

  A [data-test-id] attribute used for testing purposes

  string

  Default

  cf-ui-skeleton-form
• Name

  width

  string

  number

  Default

  100%