SkeletonText

Importing

import { SkeletonText } from '@customerio/pluma-components/react';

<SkeletonText text="product-h3" />

Single-Line Skeleton

By default, the SkeletonText component renders a single-line placeholder.

<SkeletonText text="product-p" />

Multi-Line Skeleton

To display multiple lines, use the lines prop.

<SkeletonText text="product-p" lines={3} />

Styling

The text prop determines the size and width of the skeleton based on the text sizes within Pluma.

Disabling animation

To disable the animation, set the shouldAnimate prop to false.

<SkeletonText text="product-p" shouldAnimate={false} />

Accessibility

Ensure the SkeletonText is hidden from assistive technologies and provide alternative descriptions where needed.