SkeletonImage

View on Github

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

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
  • 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

Props (API reference)

Name

Type

Default

height
string
number

70
offsetLeft
string
number

offsetTop
string
number

radiusX
string
number

0
radiusY
string
number

0
testId
string

cf-ui-skeleton-image
width
string
number

70