React / Next.js SDK

Official React components for imgfast image optimization.

download

Installation

npm install @imgfast/react

# or with yarn
yarn add @imgfast/react

# or with pnpm
pnpm add @imgfast/react

code

Basic Usage

Provider Setup

app.tsx

import { ImgfastProvider } from '@imgfast/react';

export default function App({ children }) {
  return (
    <ImgfastProvider
      publicKey="imgfast_pk_YOUR_PUBLIC_KEY"
      cdnUrl="https://cdn.imgfast.io"
    >
      {children}
    </ImgfastProvider>
  );
}

Using the Image Component

component.tsx

import { ImgfastImage } from '@imgfast/react';

export function ProductCard() {
  return (
    <ImgfastImage
      src="products/sneaker-01.jpg"
      alt="Product image"
      width={400}
      height={300}
      quality={80}
      format="auto"
    />
  );
}

widgets

Components

ImgfastImage Props

Prop	Type	Description
`src`	string	Image path (required)
`width`	number	Output width in pixels
`height`	number	Output height in pixels
`quality`	number	1-100 (default: 80)
`format`	string	auto, webp, avif, jpeg, png
`fit`	string	cover, contain, fill
`priority`	boolean	Eager load (above fold)

Responsive Images

<ImgfastImage
  src="hero-banner.jpg"
  alt="Hero banner"
  sizes="(max-width: 768px) 100vw, 50vw"
  srcSet={[400, 800, 1200, 1600]}
  format="auto"
/>

bolt

Next.js Integration

Custom Loader

next.config.js

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './lib/imgfast-loader.js',
  },
};

lib/imgfast-loader.js

export default function imgfastLoader({ src, width, quality }) {
  const publicKey = process.env.NEXT_PUBLIC_IMGFAST_PUBLIC_KEY;
  const params = new URLSearchParams({
    w: width.toString(),
    q: (quality || 80).toString(),
    f: 'auto',
  });
  return `https://cdn.imgfast.io/${publicKey}/${src}?${params}`;
}

Using with next/image

import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="hero-banner.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
    />
  );
}