open-index/open-npm huggingface dataset:
npm package: @renditions/get-img-sizes
Description: Generate string for HTML image sizes attribute.
Author: Stef
Latest version: 0.0.5
Deprecated: Package no longer supported. Use @renditions/get-sizes instead.

# @renditions/get-img-sizes

[![npm version](https://img.shields.io/npm/v/@renditions/get-img-sizes.svg?style=flat-square)](https://www.npmjs.com/package/@renditions/get-img-sizes) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)

> Generate string for HTML image sizes attribute.

## Install

```sh
npm install @renditions/get-img-sizes
```

## Usage

```js
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

```jsx
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} />
}
```
npm package: @renditions/get-sizes
Description: Generate the sizes attribute for HTML img and picture source tags
Author: Stef Jones
Latest version: 3.1.2

# @renditions/get-sizes

[![npm version](https://img.shields.io/npm/v/@renditions/get-sizes.svg?style=flat-square)](https://www.npmjs.com/package/@renditions/get-sizes) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)

Generate the sizes attribute for HTML [img](https://devdocs.io/html/element/img) and [picture](https://devdocs.io/html/element/source) tags.

## Install

```sh
npm install @renditions/get-sizes
```

## Usage

```js
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:

```js
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:

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

### Using with React

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

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

  return <img sizes={sizes} {...rest} />
}
```
npm package: @renditions/get-srcset
Description: Generate the srcset attribute for HTML img and picture tags
Author: Stef Jones
Latest version: 1.1.3

# @renditions/get-srcset

[![npm version](https://img.shields.io/npm/v/@renditions/get-srcset.svg?style=flat-square)](https://www.npmjs.com/package/@renditions/get-srcset) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)

Generate the srcset attribute for HTML [img](https://devdocs.io/html/element/img) and [picture](https://devdocs.io/html/element/source) tags.

## Install

```sh
npm install @renditions/get-srcset
```

## Usage

```js
import getSrcset from '@renditions/get-srcset'

const srcset = getSrcset([
  {
    src: '/images/320.jpg',
    width: 320
  },
  {
    src: '/images/1024.jpg',
    width: 1024
  }
])

console.log({ srcset })
// { srcset: '/images/320.jpg 320w,/images/1024.jpg 1024w' }
```

### Sorting

The first argument is expected to be an array sorted by `width` in ascending order.

To sort the array automatically, pass `true` for the second argument:

```js
const unsortedRenditions = [
  {
    src: '/images/1024.jpg',
    width: 1024
  },
  {
    src: '/images/320.jpg',
    width: 320
  },
  {
    src: '/images/720.jpg',
    width: 720
  }
]

const srcset = getSrcset(unsortedRenditions, true)

console.log({ srcset })
// { srcset: '/images/320.jpg 320w,/images/720.jpg 720w,/images/1024.jpg 1024w' }
```

### Using with React

```jsx
import React from 'react'
import getSrcset from '@renditions/get-srcset'

const renditionWidths = ['320', '1024']

const Image = ({ filename, ext, ...rest }) => {
  const renditions = renditionWidths.map(width => ({
    width,
    src: `/images/${filename}_${width}.${ext}`
  }))

  const srcset = getSrcset(renditions)

  return <img srcSet={srcset} {...rest} />
}
```