SkeletonImage

How to use SkeletonImage

Use the SkeletonImage component to simulate images, illustrations, avatars or icons whenever loading asynchronous data.

Import

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

Code examples

<SkeletonContainer>
  <SkeletonImage />
</SkeletonContainer>
<SkeletonContainer>
  <SkeletonImage />
</SkeletonContainer>
Hide source

Best practices

• Each SkeletonImage needs to be wrapped by a SkeletonContainer component.
• Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height

<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage width={100} height={35} />
  </SkeletonContainer>
</>
<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage width={100} height={35} />
  </SkeletonContainer>
</>
Hide source

• Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry

<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage radiusX={100} radiusY={100} />
  </SkeletonContainer>
</>
<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage radiusX={100} radiusY={100} />
  </SkeletonContainer>
</>
Hide source

Props

• Name

  height

  string

  number

  Default

  70
• Name

  offsetLeft

  string

  number
• Name

  offsetTop

  string

  number
• Name

  radiusX

  string

  number

  Default

  0
• Name

  radiusY

  string

  number

  Default

  0
• Name

  testId

  string

  Default

  cf-ui-skeleton-image
• Name

  width

  string

  number

  Default

  70