SkeletonImage

Import

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

Examples

Each SkeletonImage needs to be wrapped by a SkeletonContainer component.

Basic usage

Hide code
function SkeletonImageBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage />
    </SkeletonContainer>
  );
}
function SkeletonImageBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage />
    </SkeletonContainer>
  );
}
Open in Playground

Setting width and height

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

Hide code
function SkeletonImageDimensionsExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage />
      <SkeletonImage width={100} height={35} offsetTop={78} />
      {/**
       * The offsetTop value is the height of the first SkeletonImage
       * plus 8px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
function SkeletonImageDimensionsExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage />
      <SkeletonImage width={100} height={35} offsetTop={78} />
      {/**
       * The offsetTop value is the height of the first SkeletonImage
       * plus 8px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
Open in Playground

Round skeleton

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

Hide code
function SkeletonImageRoundExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage radiusX={100} radiusY={100} />
    </SkeletonContainer>
  );
}
function SkeletonImageRoundExample() {
  return (
    <SkeletonContainer>
      <SkeletonImage radiusX={100} radiusY={100} />
    </SkeletonContainer>
  );
}
Open in Playground