README
@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"
/>
)
}