components

Placeholder (code)

Use a placeholder when you want to reserve space in a specific aspect-ratio

import { Placeholder } from '@mediahuis/chameleon-react'

<Flex>
  {['4:5', '1:1', '4:3', '3:2', '16:9'].map(aspectRatio => {
    return (
      <Box key={aspectRatio} m={3} height="full" width="full">
        <Placeholder aspectRatio={aspectRatio}>
          <Box p={3} height="full" width="full">
            <Caption level={2}>{aspectRatio}</Caption>
          </Box>
        </Placeholder>
      </Box>
    );
  })}
</Flex>

<Flex>
  {['4:5', '1:1', '4:3', '3:2', '16:9'].map(aspectRatio => {
    return (
      <Box key={aspectRatio} m={3} height="full" width="full">
        <Placeholder aspectRatio={aspectRatio}>
          <Box p={3} height="full" width="full">
            <Caption level={2}>{aspectRatio}</Caption>
          </Box>
        </Placeholder>
      </Box>
    );
  })}
</Flex>

Props

Name	Type	Default	Required	Description
appearance	'placeholder''plain'	'placeholder'	-	The type of background of the Placeholder.
aspectRatio	String	'16:9'	-	The aspect ratio of the Placeholder. Is in the notation {number}:{number}. E.g. 4:3, 16:9, 21:9
children	Node	-	-	Content for component
className	String	-	-	Extend classNames.

System Props

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

position, bottom, left, right, top, zIndex

m, mb, ml, mr, mt, mx, my

p, pb, pl, pr, pt, px, py

width, maxWidth

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Appearance (usage with transparent content)

default: placeholder

When using transparent content, it's better to replace the appearance of the Placeholder when the content is loaded to plain one. This will prevent seeing the placeholder trough the transparent content.

() => {
  const [imageLoaded, setImageLoaded] = React.useState(false);

  return (
    <Box maxWidth="400px">
      <Placeholder
        aspectRatio="4:3"
        appearance={imageLoaded ? 'plain' : 'placeholder'}
      >
        <img
          onLoad={() => setImageLoaded(true)}
          src="/jesper-aggergaard-unsplash.png"
          alt="Chameleon on a transparent background"
          style={{
            maxWidth: '100%',
            height: 'auto',
            width: 'auto',
          }}
        />
      </Placeholder>
    </Box>
  );
};

() => {
  const [imageLoaded, setImageLoaded] = React.useState(false);
  return (
    <Box maxWidth="400px">
      <Placeholder
        aspectRatio="4:3"
        appearance={imageLoaded ? 'plain' : 'placeholder'}
      >
        <img
          onLoad={() => setImageLoaded(true)}
          src="/jesper-aggergaard-unsplash.png"
          alt="Chameleon on a transparent background"
          style={{
            maxWidth: '100%',
            height: 'auto',
            width: 'auto',
          }}
        />
      </Placeholder>
    </Box>
  );
};

Children

default: undefined

<Placeholder aspectRatio="16:9">
  <img
    src="http://placekitten.com/1600/900"
    alt="cat"
    style={{
      maxWidth: '100%',
      height: 'auto',
      width: 'auto',
    }}
  />
</Placeholder>

<Placeholder aspectRatio="16:9">
  <img
    src="http://placekitten.com/1600/900"
    alt="cat"
    style={{
      maxWidth: '100%',
      height: 'auto',
      width: 'auto',
    }}
  />
</Placeholder>