React components for ImageBoss image optimization. Render responsive, optimized images with automatic srcset generation, art-direction support, and seamless integration with the ImageBoss CDN.
npm install @imageboss/react
# or
yarn add @imageboss/reactimport{ImageBoss}from'@imageboss/react';functionApp(){return(<ImageBosssource="mywebsite-images"src="/photos/hero.jpg"sizes="100vw"imagebossParams={{format: 'auto'}}htmlAttributes={{alt: 'Hero image'}}/>);}The main component for rendering optimized images.
import{ImageBoss}from'@imageboss/react';// Responsive image with automatic srcset<ImageBosssource="mysite"src="/photo.jpg"sizes="(min-width: 768px) 50vw, 100vw"imagebossParams={{format: 'auto'}}/>// Fixed-size image with DPR srcset<ImageBosssource="mysite"src="/photo.jpg"width={500}height={300}imagebossParams={{format: 'auto'}}/>| Prop | Type | Description |
|---|---|---|
src | string | Image path (e.g., /images/photo.jpg) |
source | string | ImageBoss source name |
operation | string | cover, width, height, cdn, or cover modes like cover:center |
width | number | Fixed width in pixels |
height | number | Fixed height in pixels |
sizes | string | Responsive sizes attribute |
imagebossParams | object | ImageBoss options (format, blur, grayscale, etc.) |
htmlAttributes | object | HTML attributes for the img element |
disableSrcSet | boolean | Disable srcset generation |
attributeConfig | object | Remap attributes for lazysizes |
For art-direction with different images at different breakpoints.
import{Picture,Source,ImageBoss}from'@imageboss/react';<Picture><Sourcesource="mysite"src="/photo.jpg"width={1200}htmlAttributes={{media: '(min-width: 1024px)'}}/><Sourcesource="mysite"src="/photo.jpg"width={800}htmlAttributes={{media: '(min-width: 768px)'}}/><ImageBosssource="mysite"src="/photo.jpg"width={500}htmlAttributes={{alt: 'Responsive image'}}/></Picture>Render images as CSS background-image.
import{Background}from'@imageboss/react';<Backgroundsource="mysite"src="/hero.jpg"imagebossParams={{w: 1920,h: 600,format: 'auto'}}className="hero-section"><h1>Hero Title</h1></Background>Share configuration across components.
import{ImageBossProvider,ImageBoss}from'@imageboss/react';<ImageBossProvidersource="mysite"imagebossParams={{format: 'auto'}}>{/* All ImageBoss components use provider values */}<ImageBosssrc="/photo1.jpg"width={500}/><ImageBosssrc="/photo2.jpg"width={500}/>{/* Override specific values */}<ImageBosssrc="/photo3.jpg"width={500}imagebossParams={{blur: 4}}/></ImageBossProvider>Generate ImageBoss URLs without rendering.
import{buildURL}from'@imageboss/react';consturl=buildURL('mysite','/photo.jpg',{operation: 'cover',width: 500,height: 300,options: {format: 'auto',blur: 4},});// => https://img.imageboss.me/mysite/cover/500x300/format:auto,blur:4/photo.jpghttps://img.imageboss.me/:source/:operation/:dimensions/:options/path/to/image.jpg
- Operations:
cover,width,height,cdn - Cover modes:
cover:center,cover:smart,cover:face,cover:entropy,cover:attention, etc. - Options:
format:auto,blur:4,grayscale:true,dpr:2, etc.
Use native lazy loading or lazysizes:
// Native lazy loading<ImageBosssource="mysite"src="/photo.jpg"sizes="100vw"htmlAttributes={{loading: 'lazy'}}/>// With lazysizes<ImageBosssource="mysite"src="/photo.jpg"sizes="100vw"className="lazyload"attributeConfig={{src: 'data-src',srcSet: 'data-srcset',sizes: 'data-sizes',}}/># Install dependencies
npm install
# Run tests
npm test# Run playground
npm run playground
# Build
npm run buildThis project uses changesets for versioning.
# Add a changeset
npm run changeset
# Version packages (CI or manual)
npm run version-packages
# Publish to npm
npm run releaseMIT