Skeleton

Import

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

How to use Skeleton

• Compound components of Skeleton are: Container, BodyText, DisplayText, Image, Row.
• Use the Skeleton.Container to control color, background color, animation, opacity of the skeleton elements that are used inside.
• Use the Skeleton.BodyText component to simulate bodies of text with multiple lines.
• Use the Skeleton.DisplayText component to simulate headings, subheadings or titles.
• Use the Skeleton.Image component to simulate images, illustrations, avatars or icons.
• Use the Skeleton.Row component to simulate table rows. Only use this component as a child of the TableBody component. The Skeleton.Row component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag.
  • Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5).
  • Pass a value to the rowCount prop equal to the number of rows you need.
  • We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.

Examples

Basic usage

Hide code
function SkeletonContainerBasicExample() {
  return (
    <Skeleton.Container>
      <Skeleton.BodyText numberOfLines={4} />
    </Skeleton.Container>
  );
}
function SkeletonContainerBasicExample() {
  return (
    <Skeleton.Container>
      <Skeleton.BodyText numberOfLines={4} />
    </Skeleton.Container>
  );
}
Open in Playground

Different speed and color

Hide code
function SkeletonContainerDifferentSpeedExample() {
  return (
    <Skeleton.Container backgroundColor="blue" speed={1}>
      <Skeleton.BodyText numberOfLines={4} />
    </Skeleton.Container>
  );
}
function SkeletonContainerDifferentSpeedExample() {
  return (
    <Skeleton.Container backgroundColor="blue" speed={1}>
      <Skeleton.BodyText numberOfLines={4} />
    </Skeleton.Container>
  );
}
Open in Playground

Composition with different skeleton components

Hide code
function SkeletonDisplayTextCompositionExample() {
  return (
    <Skeleton.Container>
      <Skeleton.DisplayText />
      <Skeleton.BodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </Skeleton.Container>
  );
}
function SkeletonDisplayTextCompositionExample() {
  return (
    <Skeleton.Container>
      <Skeleton.DisplayText />
      <Skeleton.BodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </Skeleton.Container>
  );
}
Open in Playground

Setting image 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 (
    <Skeleton.Container>
      <Skeleton.Image />
      <Skeleton.Image width={100} height={35} offsetTop={78} />
      {/**
       * The offsetTop value is the height of the first SkeletonImage
       * plus 8px (gap between the two skeletons)
       */}
    </Skeleton.Container>
  );
}
function SkeletonImageDimensionsExample() {
  return (
    <Skeleton.Container>
      <Skeleton.Image />
      <Skeleton.Image width={100} height={35} offsetTop={78} />
      {/**
       * The offsetTop value is the height of the first SkeletonImage
       * plus 8px (gap between the two skeletons)
       */}
    </Skeleton.Container>
  );
}
Open in Playground

Round image 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 (
    <Skeleton.Container>
      <Skeleton.Image radiusX={100} radiusY={100} />
    </Skeleton.Container>
  );
}
function SkeletonImageRoundExample() {
  return (
    <Skeleton.Container>
      <Skeleton.Image radiusX={100} radiusY={100} />
    </Skeleton.Container>
  );
}
Open in Playground

Table rows

Hide code
function SkeletonRowBasicExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Name</Table.Cell>
          <Table.Cell>Email</Table.Cell>
          <Table.Cell>Address</Table.Cell>
          <Table.Cell>Postcode</Table.Cell>
          <Table.Cell>City</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Skeleton.Row rowCount={5} columnCount={5} />
      </Table.Body>
    </Table>
  );
}
function SkeletonRowBasicExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Name</Table.Cell>
          <Table.Cell>Email</Table.Cell>
          <Table.Cell>Address</Table.Cell>
          <Table.Cell>Postcode</Table.Cell>
          <Table.Cell>City</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Skeleton.Row rowCount={5} columnCount={5} />
      </Table.Body>
    </Table>
  );
}
Open in Playground

Usage without compound components

Hide code
function SkeletonImageDimensionsExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
      <SkeletonBodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
function SkeletonImageDimensionsExample() {
  return (
    <SkeletonContainer>
      <SkeletonDisplayText />
      <SkeletonBodyText offsetTop={37} numberOfLines={5} />
      {/**
       * The offsetTop value is the height of the DisplayText
       * plus 16px (gap between the two skeletons)
       */}
    </SkeletonContainer>
  );
}
Open in Playground

Skeleton.Container

Skeleton.BodyText

Skeleton.DisplayText

Skeleton.Image

Skeleton.Row