SkeletonBodyText

Import

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

Examples

Each SkeletonBodyText needs to be wrapped by a SkeletonContainer component.

Use the numberOfLines prop to determine how many lines you want to render. We advise using a value that matches the number of lines the text will have after loading.

Basic usage

Open in Playground
function SkeletonContainerBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}
function SkeletonContainerBasicExample() {
  return (
    <SkeletonContainer>
      <SkeletonBodyText numberOfLines={4} />
    </SkeletonContainer>
  );
}
Hide source

Composition with other skeletons

Open in Playground
function SkeletonDisplayTextCompositionExample() {
  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 SkeletonDisplayTextCompositionExample() {
  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>
  );
}
Hide source