Deprecation Notice
This package has been deprecated and is no longer maintained. It has been moved to a new repository and is now part of a larger project. Please update your dependencies to use the new package instead.
New package repository: https://github.com/CrystallizeAPI/reactjs-components
Thank you for using this package!
React Srcset Images for Crystallize
A React package to output an img tag with different source variations from Crystallize using srcset. Use this to easily build responsive images powered by the Crystallize headless commerce service.
And don't forget: react image sizes attribute for fast ecommerce.
Demo
Install
yarn add @crystallize/react-image
Use
import { Image } from '@crystallize/react-image';
const imageFromCrystallize = {
url: '...',
variants: [...]
}
<Image
{...imageFromCrystallize}
sizes="(max-width: 700px) 90vw, 700px"
/>
Render child function
const imageFromCrystallize = {
url: '...',
variants: [...],
altText: ''
}
<Image
{...imageFromCrystallize}
sizes="(max-width: 700px) 90vw, 700px"
>
{({
src,
srcSet,
srcSetWebp,
useAvif,
useWebP,
sizes,
width,
height,
loading,
alt,
originalFileExtension,
...rest
}) => {
// Roll your own render
return (
<picture {...rest}>
{useAvif && (
<source srcSet={srcSetAvif} type="image/avif" sizes={sizes} />
)}
{useWebP && (
<source srcSet={srcSetWebp} type="image/webp" sizes={sizes} />
)}
{srcSet.length > 0 && (
<source
srcSet={srcSet.join(", ")}
src={std[0].url}
type={`image/${originalFileExtension}`}
sizes={sizes}
/>
)}
<img src={src} width={width} height={height} loading={loading} alt={alt} />
</picture>
)
}}
</Image>