https://github.com/crystallizeapi/react-image

A React package to output an img tag with different source variations from Crystallize
https://github.com/crystallizeapi/react-image

Last synced: 5 months ago
JSON representation

A React package to output an img tag with different source variations from Crystallize

• Host: GitHub
• URL: https://github.com/crystallizeapi/react-image
• Owner: CrystallizeAPI
• License: mit
• Archived: true
• Created: 2018-02-21T09:49:19.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-02-23T23:17:21.000Z (over 2 years ago)
• Last Synced: 2024-09-27T12:22:28.155Z (9 months ago)
• Language: TypeScript
• Homepage: react-image-storybook.vercel.app
• Size: 3.92 MB
• Stars: 7
• Watchers: 3
• Forks: 4
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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!

---

![alt text](https://raw.githubusercontent.com/CrystallizeAPI/react-image/HEAD/media/logo.png 'An illustration of an atom')

# 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](https://crystallize.com/).

And don't forget:

[react image sizes attribute for fast ecommerce](https://crystallize.com/blog/react-image-sizes-attribute-for-fast-ecommerce).

## Demo

[Demo](https://react-image.milliseconds.io/)

## Install

```

yarn add @crystallize/react-image

```

## Use

```

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

const imageFromCrystallize = {

    url: '...',

    variants: [...]

}

```

## Render child function

```

const imageFromCrystallize = {

    url: '...',

    variants: [...],

    altText: ''

}

  {({

      src,

      srcSet,

      srcSetWebp,

      useAvif,

      useWebP,

      sizes,

      width,

      height,

      loading,

      alt,

      originalFileExtension,

      ...rest

    }) => {

      // Roll your own render

      return (

          

            {useAvif && (

                

            )}

            {useWebP && (

                

            )}

            {srcSet.length > 0 && (

                

            )}

            

        

      )

  }}

```