@stnew/responsive-image

Responsive Image component that wraps the HTML picture element and handles lazy loading the media.

Props

| Props | Type | Optional | Default | Desc | | ----- | ----- | ----- | ----- | ----- | | sources | SourceProps[] | no (unless src is set) | n/a | Objects defining the media sources and the breakpoints at which they should be used | | src | string | no (unless sources is set) | n/a | Can be used instead of sources to apply a single media source to the component | | indexBy | 'min-width' or 'max-width' | yes | 'min-width' | Rule by which breakpoints are decided | | indexUnit | 'px' or 'rem' or 'vw' | yes | 'px' | Unit used when parsing breakpoints | | lazyTimeout | number | yes | n/a | If defined, this is the number of milliseconds before the image starts to load | | lazy | boolean | yes | false | If true, the image will load when the intersection-observer marks the element as "in view" | | nativeLazy | boolean | yes | false | If true, enables native lazy loading | | rootMargin | string | yes | '500px' | Root Margin for the intersection-observer | | onLoad | function | yes | n/a | Callback for when the image is loaded | | alt | string | yes | n/a | value for the alt tag for the img element | | title | string | yes | n/a | value for the title tag for the img element (will be used for alt if alt is not otherwise defined) |

SourceProps

| Props | Type | Optional | Desc | | ----- | ----- | ----- | ----- | | src | string | no | Media source string | | width | number | yes | Screen width at which to use this media source | | isDefault | boolean | yes | If true, this media source will be used as default |

Usage

import React from 'react'
import { ResponsiveImage } from '@stnew/responsive-image'

const sources = [
  {
    src: '/assets/stn-new-wide.png',
    width: 1200,
  },
  {
    src: '/assets/stn-new.png',
    width: 960,
    isDefault: true,
  },
  {
    src: '/assets/stn-new-narrow.png',
    width: 600,
  },
];

funtion MultipleSourcesExample() {
	return (
		<ResponsiveImage
      sources={sources}
      alt="something new graphic"
      title="this is something new"
    />
	)
}

funtion SingleSourceExample() {
	return (
		<ResponsiveImage
      src="/assets/stn-new.png"
      alt="something new graphic"
      title="this is something new"
    />
	)
}