Usage no npm install needed!

<script type="module">
  import chantellePlImage from 'https://cdn.skypack.dev/@chantelle/pl-image';
</script>

README

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.