@micro-image/image

This is an image component for React meant to consume an image proxy, currently supporting two: our own, @micro-image/proxy-image, and ipx, for the time being. Use a single, high-quality image, this component will only load the appropriate size.

Install

npm install @micro-image/image

Usage

import Image from "@micro-image/react"

function YourComponent() {
  return (
    <div>
      <MicroImage
        src="https://picsum.photos/800/500"
        width={800}
        height={500}
        objectFit="cover"
      />
    </div>
  )
}

Note: The image will always take 100% of the width of the parent, that's intended. If you wish to change that, wrap it in an element with limited width, for example, <div style={{ width: "400px }}>.

Props

src: For @micro-image/proxy-image, that's the full URL of the image. For ipx, that's the stored path to your image, within ipx.

width and height: Used for aspect ratio, must be provided.

objectFit: "cover" | "contain" | "none", optional, defaults to "none".

alt: optional, defaults to empty string if not provided.

Provider

A provider component is available. Must be used to set your provider (micro-image or ipx), and the URL to your image proxy.

import Image from "@micro-image/react"

function YourComponent() {
  return (
    <div>
      <MicroImage
        src="https://picsum.photos/800/500"
        width={800}
        height={500}
        objectFit="cover"
      />
    </div>
  )
}

function App() {
  return (
    <ImageCacheProvider
      provider="micro-image"
      cacheProxyUrl="http://localhost:4000/cache"
    >
      <YourComponent />
    </ImageCacheProvider>
  )
}

Limitations

You must know the image width, or at least the aspect ratio you're trying to use. This is intended to avoid CLS, by avoiding the page from jumping when the image loads.

Also, as referenced previously, this component cannot be used without an image proxy, and currently only 2 are supported.