Forma 36

SkeletonImage

StorybookGithub
stable

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

  • 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

Help improve this page

Edit on GithubRead the contribution guide