@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