Placeholder: React
Placeholders reserve space in a specific aspect-ratio.
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Placeholder } from '@mediahuis/chameleon-react';
export default function Example() {
return <Placeholder />;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
appearance | 'placeholder' | 'plain' | 'placeholder' | No | Controls the visual style of the placeholder. Use 'placeholder' for a styled placeholder background, or 'plain' for a plain background. |
aspectRatio | String | - | Yes | The aspect ratio of the Placeholder. Specify the aspect ratio using the format {width}:{height}, such as 4:3, 16:9, or 21:9. |
children | ReactNode | - | No | The content to be displayed within the Placeholder. |
className | String | - | No | The `className` prop allows extending the class names of the Placeholder component. |