1.0.3 • Published 3 years ago
react-responsive-image-container v1.0.3
react-responsive-image-container
Create responsive images. GIT
Before tou start
You need to know why responsive images are so usefull and how to create one.
Learn about Responsive Images.
Installation
npm i react-responsive-image-container
Usage
import { ResponsiveImageContainer } from 'react-responsive-image-container'
const srcSet = [
{ path: 'https://via.placeholder.com/1920', size: 1920 },
{ path: 'https://via.placeholder.com/1200', size: 1200 },
{ path: 'https://via.placeholder.com/900', size: 900 },
{ path: 'https://via.placeholder.com/600', size: 600 },
{ path: 'https://via.placeholder.com/480', size: 480 },
{ path: 'https://via.placeholder.com/300', size: 300 }
]
const sizes = [
{ minWidth: '1366px', size: '350px' }, // if (window.innerWidth >= 1366px) { image.width = 350px }
{ minWidth: '1024px', size: '33vw' }, // if (window.innerWidth >= 1024px) { image.width = 33vw }
{ minWidth: '768px', size: '75vw' }, // if (window.innerWidth >= 768px) { image.width = 75vw }
{ minWidth: '0', size: '100vw' } // if (window.innerWidth >= 0) { image.width = 100vw }
]
const src = srcSet[0].path
<ResponsiveImageContainer
srcSet={srcSet}
sizes={sizes}
src={src}
loading={'lazy'}
className={'much-responsive'}
/>
<div class="responsve-image-container much-responsive">
<img
srcset="
https://via.placeholder.com/1920 1920w,
https://via.placeholder.com/1200 1200w,
https://via.placeholder.com/900 900w,
https://via.placeholder.com/600 600w,
https://via.placeholder.com/480 480w,
https://via.placeholder.com/300 300w
"
sizes="(min-width: 1366px) 300px,
(min-width: 1024px) 33vw,
(min-width: 768px) 75vw,
(min-width: 0) 100vw"
src="https://via.placeholder.com/1920"
loading="lazy"
/>
</div>
Props*
Attribute | Type | Default | Description |
---|---|---|---|
srcSet | array | null | (Mandatory) Array of objects ({ path, size } ) |
sizes | array | [] | (Optional) Array of objects ({ minWidth, size } ) |
src | string | null | (Optional) Default src attribute |
loading | string | 'auto' | (Optional) Default loading attribute |
className | string | null | (Optional) Pass custom className to the container |