Noncommital Premarital Mischief

npm

Does your artifact manager get in the way? Join us on Oct. 8 at 10am PT, to discuss how npm can help.Sign up »

@crystallize/react-image

3.0.5 • Public • Published

alt text

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.

React Image Srcset resource home.

How to use

yarn add @crystallize/react-image

How to use

import Image from '@crystallize/react-image';

const imageFromCrystallize = {
    url: '...',
    variants: [...],
    altText: ''
}

<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, sizes, ...rest }) => {
      // Roll your own render
      return (
          <picture>
            {srcSetWebp.length > 0 && (
                <source
                srcSet={srcSetWebp.join(", ")}
                src={webp[0].url}
                type="image/webp"
                />
            )}
            {srcSet.length > 0 && (
                <source
                srcSet={srcSet.join(", ")}
                src={std[0].url}
                type="image/jpeg"
                />
            )}

            <img src={src} sizes={sizes} {...rest} />
        </picture>
      )
  }}
</Image>

Keywords

none

install

npm i @crystallize/react-image

Downloadsweekly downloads

141

version

3.0.5

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability