/

<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
<Placeholder>

  {(Box) => (

    <div

      style={{

        maxWidth: 'var(--site-max-width, 1200px)',

        margin: '0 auto',

        padding: '0 32px',

        display: 'flex',

        flexDirection: 'row',

        width: '100%',

        marginTop: '72px',

      }}

    >

      <div

        style={{

          marginRight: '2em',

          width: '250px',

          flexShrink: 0,

        }}

      >

        <Box width="7ch" height="0.75rem" marginBottom="4px" />

        <Box height="30px" />

        <Box height="30px" />

        <Box height="1rem" marginBottom="16px" repeat={3} />

        <Box height="1px" />

        <Box height="1rem" marginBottom="16px" repeat={5} />

        <Box height="1px" />

        <Box height="1rem" marginBottom="16px" repeat={3} />

      </div>

      <div

        style={{

          flex: '1 1',

          padding: '0 32px',

          overflow: 'auto',

        }}

      >

        {/* Old Version Notice */}

        <Box height="40px" />

        {/* Search */}

        <Box height="40px" marginBottom="56px" />

        {/* H1 and Jump to Section */}

        <Box width="16ch" fontSize="2.5rem" height="40px" marginBottom="24px" />

        <Box

          width="16ch"

          height="1rem"

          marginBottom="20px"

          display="inline-block"

        />

        {/* Content */}

        <Box lines={['80ch', '80ch', '65ch']} prose />

        <Box lines={['70ch']} prose />

        <Box lines={['80ch', '80ch', '80ch', '35ch']} prose />

        <Box height="100px" margin="20px 0" display="inline-block" />

      </div>

    </div>

  )}

</Placeholder>

Where it's used

Latest:0.1.2
Search with

Releases

Latest:0.1.2
registry.npmjs.org
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
<Placeholder>

  {(Box) => (

    <div

      style={{

        '--placeholder-bg-color': 'var(--gray-2)',

        maxWidth: 'var(--site-max-width, 1200px)',

        margin: '0 auto',

        padding: '0 32px',

        display: 'flex',

        flexDirection: 'row',

        width: '100%',

        marginTop: '72px',

      }}

    >

      <div

        style={{

          marginRight: '2em',

          width: '250px',

          flexShrink: 0,

        }}

      >

        <Box width="7ch" height="0.75rem" marginBottom="4px" />

        <Box height="30px" />

        <Box height="30px" />

        <Box height="1rem" marginBottom="16px" repeat={3} />

        <Box height="1px" />

        <Box height="1rem" marginBottom="16px" repeat={5} />

        <Box height="1px" />

        <Box height="1rem" marginBottom="16px" repeat={3} />

      </div>

      <div

        style={{

          flex: '1 1',

          padding: '0 32px',

          overflow: 'auto',

        }}

      >

        {/* Old Version Notice */}

        <Box height="40px" />

        {/* Search */}

        <Box height="40px" marginBottom="56px" />

        {/* H1 and Jump to Section */}

        <Box width="16ch" fontSize="2.5rem" height="40px" marginBottom="24px" />

        <Box

          width="16ch"

          height="1rem"

          marginBottom="20px"

          display="inline-block"

        />

        {/* Content */}

        <Box lines={['80ch', '80ch', '65ch']} prose />

        <Box lines={['70ch']} prose />

        <Box lines={['80ch', '80ch', '80ch', '35ch']} prose />

        <Box height="100px" margin="20px 0" display="inline-block" />

      </div>

    </div>

  )}

</Placeholder>