A component that renders single or grouped placeholder stripes with optional opacity animations and grid layout. Useful for loading states or content placeholders.

Parameters:
NameTypeDescription
propsobject

Component props

Properties
NameTypeAttributesDescription
animatedboolean<optional>

Whether to include animation effects

borderRadiusstring<optional>

Border radius of placeholder stripes

customAttributesobject<optional>

Custom HTML attributes for placeholder elements

customClassesstring | Array.<string> | object<optional>

Additional CSS classes for placeholder elements

gridCountnumber<optional>

Number of placeholder stripes in a single row

gridItemSpacingnumber<optional>

Spacing between grid items when in a row using grid count

gridItemWidthnumber<optional>

Width of each grid item as a percentage

gridPropsobject<optional>

Props to pass to the Grid component

groupDataArray.<object><optional>

Array of group configurations for multiple placeholder sets

heightstring<optional>

Height of placeholder stripes

rowsnumber<optional>

Number of rows. This overrides groupData if set.

spacingstring | number | Array.<string> | object<optional>

Spacing between elements

widthstring<optional>

Width of placeholder stripes

wrapperAttributesobject<optional>

Custom HTML attributes for wrapper element

wrapperClassesstring | Array.<string> | object<optional>

Additional CSS classes for wrapper

refobject | null

Forwarded ref to the component

Since
  • 4.5.0
Source
Returns:

A placeholder component with configurable stripes and layout

Type: 
JSX.Element
Example
// Single placeholder
<Placeholder height="20px" width="50%" animated={true} />

// Grid of placeholders
<Placeholder gridCount={3} spacing={4} />

// Grouped placeholders
<Placeholder
  groupData={[
    { gridCount: 2, height: '20px' },
    { gridCount: 3, height: '15px', animated: false }
  ]}
/>