This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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

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

NameRequiredDefaultTypeDescription
height70
string
number
offsetLeft
string
number
offsetTop
string
number
radiusX0
string
number
radiusY0
string
number
width70
string
number
testIdcf-ui-skeleton-imagestring