super-image

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!