@renditions/get-img-sizes

Generate string for HTML image sizes attribute.

Install

npm install @renditions/get-img-sizes

Usage

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} />
}