Need private packages and team management tools?Check out npm Teams »

@renditions/react-img

2.0.2 • Public • Published

@renditions/react-img

npm version js-standard-style

Responsive image component for React with nice abstractions over srcset, sizes and src attributes.

Install

npm install @renditions/react-img

Usage

Import react and @renditions/react-img:

import React from 'react'
import Img from '@renditions/react-img'

Define a renditions configuration:

const renditions = [
  { width: '320' },
  { width: '768' },
  { width: '1280' }
]

Define a getSrc function that returns the source URL for a given rendition:

const getSrc = (filename, ext, rendition) => {
  return `/images/${filename}_${rendition.width}.${ext}`
}

Define your Image component:

const Image = ({ filename, ext, alt, ...rest }) => (
  <Img
    getSrc={getSrc.bind(null, filename, ext)}
    renditions={renditions}
    alt={alt}
    {...rest}
  >
)

Here's what this component renders to the DOM:

JSX:

<Image filename="oranges" ext="jpg" alt="Oranges in a bowl.">

HTML:

<img
  src="/images/oranges_320.jpg"
  srcset="/images/oranges_320.jpg 320w, /images/oranges_768.jpg 768w, /images/oranges_1280.jpg 1280w"
  sizes="100vw"
  alt="Oranges in a bowl."
>

Sizes

The sizes attribute defaults to a value of 100vw. Read more about the sizes attribute here.

To change the sizes attribute you can provide a width prop.

JSX:

<Image filename="oranges" ext="jpg" width="50vw" alt="Oranges in a bowl.">

HTML:

<img
  src="/images/oranges_320.jpg"
  srcset="/images/oranges_320.jpg 320w, /images/oranges_768.jpg 768w, /images/oranges_1280.jpg 1280w"
  sizes="50vw"
  alt="Oranges in a bowl."
>

Breakpoints

To specify different sizes for different viewport widths, you can provide a breakpoints prop.

JSX:

<Image
  filename="oranges"
  ext="jpg"
  width="100vw"
  breakpoints={[
    {
      mediaMinWidth: '960px',
      width: '100vw'
    },
    {
      mediaMinWidth: '480px',
      width: '50vw'
    }
  ]}
  alt="Oranges in a bowl.">

HTML:

<img
  src="/images/oranges_320.jpg"
  srcset="/images/oranges_320.jpg 320w, /images/oranges_768.jpg 768w, /images/oranges_1280.jpg 1280w"
  sizes="(min-width: 960px) 100vw, (min-width: 480px) 50vw, 100vw"
  alt="Oranges in a bowl."
>

Sort Order

The breakpoints prop is expected to be an array sorted by mediaMinWidth in descending order. Likewise, the renditions prop is expected to be an array sorted by width in ascending order.

To sort these automatically, you can set the autoSortBreakpoints and autoSortRenditions boolean props.

Install

npm i @renditions/react-img

DownloadsWeekly Downloads

0

Version

2.0.2

License

Apache-2.0

Unpacked Size

23.4 kB

Total Files

12

Last publish

Collaborators

  • avatar