SuperImage

React component that render <img> with nicer interface

Install

$ npm install --save super-image

This package use Object.assign(), so you may need to polyfill via object.assign.

Usage

<SuperImage
  src="image.png"
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

Use <picture> element

Set sources property.

<SuperImage
  src="image.png"
  sources={[{
    srcSet : 'image.webp',
    type   : 'image/webp'
  }]}
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

Use object-fit fallback

Set fitFallback property true.

<SuperImage
  fitFallback
  src="image.png"
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

Config

| Property | Type | Description | Default value | Required | |----------|------|-------------|---------------|----------| | src | String | Image url | - | Yes | | sources | Array | Sets of <source> attributes: srcSet, sizes, media and type | [] | No | | width | DOMString | Image width | - | No | | height | DOMString | Image height | - | No | | alt | String | Alternative text for <img> | "" | No | | role | String | WAI-ARIA for <img> | - | No | | className | String | className property for component | "" | No | | flexible | Boolean | Make component fluid | false | No | | fit | String | CSS object-fit property for <img> (contain or cover) | - | No | | fitFallback | Boolean | Force component to use background-image | false | No |

License

MIT © FRESH!