ImageBoss for React

Use our official React integration to generate ImageBoss URLs and render optimized images in your React apps. The library provides components and hooks to work with ImageBoss seamlessly.

Installation

Install the package from npm:

npm install @imageboss/react

Or with yarn:

yarn add @imageboss/react

Basic example

Wrap your app with ImageBossProvider (using your ImageBoss source from the dashboard), then use the ImageBoss component for responsive images with automatic srcset:

import { ImageBossProvider, ImageBoss } from '@imageboss/react';

function App() {
  return (
    <ImageBossProvider source="mywebsite-images">
      <ImageBoss
        src="/images/photo.jpg"
        operation="cover"
        width={500}
        height={300}
        sizes="(min-width: 600px) 500px, 100vw"
        alt="Optimized image"
      />
    </ImageBossProvider>
  );
}

src is the image path; operation can be cover, width, height, or cdn. The component generates the ImageBoss URL and optional srcset for responsive loading.

Full Documentation

The full documentation and usage examples are available at @imageboss/react on GitHub.

Questions?

If you have any questions please don't hesitate, send us a message on support[at]imageboss.me or in case of any bugs or problems with your integration you're more than welcome to open an issue.