React framework family
React, Next.js, Preact, Remix, TanStack Start, Gatsby, Redwood, Waku, and Docusaurus integrations.
React
import { createKeenpixImage } from '@keenpix/react'
const KeenpixImage = createKeenpixImage({
baseUrl: 'https://images.example.com',
projectId: 'website',
})
export function Hero() {
return <KeenpixImage alt="Hero" src="/hero.jpg" widths={[640, 1280]} />
}The configured component is SSR-safe and does not depend on browser globals.
Next.js
import Image from 'next/image'
import { createNextLoader } from '@keenpix/next'
const loader = createNextLoader({
baseUrl: 'https://images.example.com',
projectId: 'website',
})
export function Hero() {
return <Image loader={loader} src="/hero.jpg" alt="Hero" width={1280} height={720} />
}Use createNextImageProps() when composing props separately. Next's loader receives display dimensions, so responsive candidate heights remain proportional.
Props-first React frameworks
Preact, Remix/React Router, TanStack Start, Redwood, Waku, and Docusaurus expose pure factories with the same call shape:
import { createTanStackImage } from '@keenpix/tanstack-start'
const image = createTanStackImage({
baseUrl: 'https://images.example.com',
projectId: 'website',
})
export function Hero() {
return <img {...image({ alt: 'Hero', src: '/hero.jpg', widths: [640, 1280] })} />
}Swap the import and factory for your runtime:
| Package | Factory |
|---|---|
@keenpix/preact | createPreactImage |
@keenpix/remix | createRemixImage or createRemixImageLoader |
@keenpix/tanstack-start | createTanStackImage or createTanStackImageLoader |
@keenpix/redwood | createRedwoodImage |
@keenpix/waku | createWakuImage |
@keenpix/docusaurus | createDocusaurusImage |
Waku support is preview while Waku 1.0 is beta. Docusaurus keeps local Markdown assets on Docusaurus' native pipeline; use the adapter for remote/dynamic images and MDX components.
Gatsby
import { GatsbyImage } from 'gatsby-plugin-image'
import { createGatsbyImageData } from '@keenpix/gatsby'
const image = createGatsbyImageData(config, {
alt: 'Hero',
height: 720,
src: '/hero.jpg',
width: 1280,
})
export function Hero() {
return <GatsbyImage image={image} alt="Hero" />
}Gatsby's StaticImage requires statically analyzable source data and cannot use a runtime loader. Use GatsbyImage for Keenpix delivery.