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 ="image.png" ="160" ="90" ="super-image" ="contain"/>
<picture>
element
Use Set sources
property.
<SuperImage ="image.png" = ="160" ="90" ="super-image" ="contain"/>
object-fit
fallback
Use Set fitFallback
property true
.
<SuperImage ="image.png" ="160" ="90" ="super-image" ="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!