<Placeholder> Component

Use <Placeholder /> to render skeleton loading states. The component passed to the render prop, named Box below, accepts prose, lines and repeat as unique props. All other props are spread to the element's style prop.

  • prose: boolean - if true, styles the box as prose by wrapping in a p element
  • lines: string[] - Pass an array of line widths to render multi-line placeholders. Used in conjunction with prose
  • repeat: number - Repeat the placeholder element n times
Share
Code Editor

Where it's used

0.x.x
Loading 0.x.x releases...

Props

NameDescription
children*
function
Render prop used to render the placeholder layout. The function accepts a single argument, which is the renderable placeholder component.

Custom Background Color

You can control the placeholder element background color using the --placeholder-bg-color CSS Variable.

Share
Code Editor