@spronta/images-react

React components for the Spronta image CDN. Responsive images with automatic srcset generation and blurhash placeholders.

Install

npm install @spronta/images @spronta/images-react

Quick start

import { Spronta } from "@spronta/images";
import { SprontaProvider, SprontaImage } from "@spronta/images-react";

const client = new Spronta({
  baseUrl: "https://cdn.spronta.com",
  project: "my-project",
});

function App() {
  return (
    <SprontaProvider client={client}>
      <SprontaImage
        path="hero.jpg"
        alt="Hero image"
        widths={[400, 800, 1200]}
        sizes="(max-width: 768px) 100vw, 50vw"
        blurhash="LEHV6nWB2y"
        width={1200}
        height={800}
      />
    </SprontaProvider>
  );
}

Components

<SprontaProvider>

Wrap your app once to provide the Spronta client to all <SprontaImage> components.

<SprontaProvider client={sprontaClient}>
  {children}
</SprontaProvider>

<SprontaImage>

Renders a responsive <img> with automatic srcset, format negotiation, and blurhash placeholder.

Prop	Type	Description
path	string	Image path on the CDN
alt	string	Alt text (required)
transforms	object	Transform options (width, height, fit, etc.)
widths	number[]	Srcset breakpoints
sizes	string	Sizes attribute
blurhash	string	Blurhash string for placeholder
width	number	Intrinsic width
height	number	Intrinsic height
loading	string	lazy (default) or eager

How it works

1. Generates src + srcset via the core SDK
2. Decodes blurhash to a 32px canvas placeholder
3. Fades in the actual image on load

Requirements

• React 18+
• @spronta/images (core SDK)

License

MIT