Super-image NPM

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