Skip to content
TanStackIntent
TanStack Intent/Registry/denwa-web-shared

denwa-web-shared

A shared library for Next.js App Router projects containing reusable components, hooks, schemas, and utilities.

render-picture

core
90 linesSource

Use the BasePicture component to render images instead of Next.js Image. Load when generating images, using getImageData, IPreparedServerImage, or IPreparedServerImageWithAlt.

denwa-web-shared — Render responsive images

Setup

tsx
import { BasePicture } from 'denwa-web-shared/server';
import { getImageData } from 'denwa-web-shared/server';

// Assuming serverImage is of type IPreparedServerImage
const pictureData = getImageData(serverImage);

<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;

Core Patterns

Rendering a picture using server data

tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';
import type { IPreparedServerImage } from 'denwa-web-shared/server';

export const MyComponent = ({ image }: { image: IPreparedServerImage }) => {
  const data = getImageData(image);

  return <BasePicture data={data} alt="Responsive image" type={image.type} />;
};

Common Mistakes

CRITICAL Using next/image instead of Picture

Wrong:

tsx
import Image from 'next/image';

<Image src={src} alt={alt} />;

Correct:

tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';

const pictureData = getImageData(serverImage);
<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;

Agents default to next/image instead of using the custom BasePicture component.

Source: maintainer interview

HIGH Not using getImageData for Picture path

Wrong:

tsx
import { BasePicture } from 'denwa-web-shared/server';

<BasePicture data={{ image1x: item.path }} alt="alt text" type="image/jpeg" />;

Correct:

tsx
import { BasePicture, getImageData } from 'denwa-web-shared/server';

const pictureData = getImageData(item);
<BasePicture data={pictureData} alt="alt text" type={item.type} />;

Agents try to construct paths manually instead of using the getImageData helper to generate PictureData.

Source: maintainer interview