Wondering what’s next for npm?Check out our public roadmap! »

    @crystallize/react-image
    TypeScript icon, indicating that this package has built-in type declarations

    7.1.0 • 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.

    Demo

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

    Install

    npm i @crystallize/react-image

    DownloadsWeekly Downloads

    2,989

    Version

    7.1.0

    License

    MIT

    Unpacked Size

    55.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar