renditions / get-sizes

Generate the sizes attribute for HTML img and picture tags.

@renditions/get-sizes

Generate the sizes attribute for HTML img and picture tags.

Install

npm install @renditions/get-sizes

Usage

import getSizes from '@renditions/get-sizes'

const sizes = getSizes({
  size: '100vw',
  breakpoints: [
    {
      mediaMinWidth: '960px',
      size: '50vw'
    },
    {
      mediaMinWidth: '480px'
    }
  ]
})

console.log({ sizes })
// { sizes: '(min-width: 960px) 50vw,(min-width: 480px) 100vw,100vw' }

Breakpoints

The breapoints argument is expected to be an array sorted by mediaMinWidth in descending order.

To sort the breakpoints automatically, pass true for the second argument:

const sizesConfig = {
  size: '100vw',
  breakpoints: [
    {
      mediaMinWidth: '960px',
      size: '50vw'
    },
    {
      mediaMinWidth: '1440px',
      size: '33vw'
    },
    {
      mediaMinWidth: '480px'
    }
  ]
}

const sizes = getSizes(sizesConfig, true)

console.log({ sizes })
// { sizes: '(min-width: 1440px) 33vw,(min-width: 960px) 50vw,(min-width: 480px) 100vw,100vw' }

The breakpoints array can be also be omitted entirely:

console.log({ sizes: getSizes({ size: '100vw' }) })
// { sizes: '100vw' }

Using with React

import React from 'react'
import getSizes from '@renditions/get-sizes'

const MyImage = ({ size = '100vw', ...rest }) => {
  const sizes = getSizes({ size })

  return <img sizes={sizes} {...rest} />
}

get-sizes's Issues

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

This repository currently has no open or pending branches.

---

• Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.