React components for ImageEngine integration

Hassle-free way to deliver optimized responsive images in your React applications.

Quick start

The package includes four components:

• ImageEngineProvider
• Image
• Picture
• Source

To start using provided image tags in your application, place ImageEngineProvider somewhere above them in the DOM tree with the deliveryAddress prop set to your ImageEngine Delivery Address:

import{ImageEngineProvider}from"@imageengine/react"functionApp(){return(<ImageEngineProviderdeliveryAddress="https://blazing-fast-pics.cdn.imgeng.in"// or, for local development:// deliveryAddress="http://localhost:9009"><ShoppingCart/>
...
</ImageEngineProvider>)}

import{Image}from"@imageengine/react"functionShoppingCart(){return(<section><Imagesrc="pick-ups/custom/unstoppable.jpg"srcSet={...}sizes={...}directives={...}{...otherProps}/>
</section>
...
)}

Demo app on CodeSandbox

Component props reference

ImageEngineProvider

deliveryAddress - ImageEngine Delivery Address:

deliveryAddress: string

stripFromSrc - Strip away a portion of a source string in all ImageEngine's components. Particularly useful if your images are coming from a headless CMS and you need to erase something in received URL path (origin, for example):

stripFromSrc?: string

Image

src - Relative path to the image:

src: string

directives - ImageEngine directives:

directives?: {// Define desired width.width?: number// Set width to auto (with fallback).
autoWidthWithFallback?: number// Define desired height.
height?: number// Adjust compression.// Possible range: 0-100.
compression?: number// Define desired output format.outputFormat?:
|"png"|"gif"|"jpg"|"bmp"|"webp"|"jp2"|"svg"|"mp4"|"jxr"|"avif"|"jxl"// Define desired fit method.
fitMethod?: "stretch"|"box"|"letterbox"|"cropbox"// Don't apply any optimizations to the origin image.
noOptimization?: true// Adjust sharpness.// Possible range: 0-100.
sharpness?: number// Define rotation.// Possible range: -360 to 360.
rotate?: number// Use WURFL to calculate screen's width and then scale the image accordingly.// Possible range: 0-100 (float).
scaleToScreenWidth?: number// Crop the image [width, height, left, top].
crop?: number[]// Convert the image into a data url.inline?: true// Keep EXIF data.keepMeta?: trueforce_download?: true;max_device_pixel_ratio?: 2.1;// 1-4 float}

srcSet - List of image variations for the image source set:

srcSet?: [{// Relative path to the image.src: string
// Width descriptor.width: string
// Custom optimization instructions.directives?: TDirectives}]

Source

srcSet - List of image variations for the image source set:

srcSet?: [{// Relative path to the image.src: string// Width descriptor.width: string
directives?: TDirectives}]