@renditions/get-img-sizes
Generate string for HTML image sizes attribute.
Install
npm install @renditions/get-img-sizesUsage
import getImgSizes from '@renditions/get-img-sizes'
const sizes = getImgSizes({
defaultImageWidth: '100vw',
breakpoints: [
{
viewportMinWidth: '960px',
imageWidth: '50vw'
},
{
viewportMinWidth: '480px'
}
]
})
console.log(sizes)The above code logs the following string to the console:
(min-width: 960px) 50vw,(min-width: 480px) 100vw,100vw
Using with React
import React from 'react'
import getSizes from '@renditions/get-img-sizes'
const Image = ({ width, ...rest }) => {
const sizes = getSizes({ defaultImageWidth: width })
return <img sizes={sizes} {...rest} />
}