Image

Installation

yarn add @chantelle/pl-image

React Component

import Image from '@chantelle/pl-image';

ReactDOM.render(
  <Image source="http://via.placeholder.com/350x150" alt="Alternative text" />,
  container
);

SrcSet

import Image from '@chantelle/pl-image';

ReactDOM.render(
  <Image
    source="http://via.placeholder.com/350x150"
    alt="Alternative text"
    sourceSet={[
      {source: "http://via.placeholder.com/350x150", descriptor: "150w", condition: "(max-width: 850px) 150px"},
      {source: "http://via.placeholder.com/350x200", descriptor: "200w", condition: "200px"},
    ]}
  />,
  container
);

CSS API

To use the Image component, add the .pl-image to the <img /> element to apply the styles.