Atoms

An atoms.tsx file in a page folder defines the content for each hotspot on that page.

Structure

atoms.tsx

export function Area1Atom() {
  return <div>Content shown when this hotspot is clicked</div>;
}

export function Area2Atom() {
  return <div>Content for the second hotspot</div>;
}

export default {
  Area1Atom,
  Area2Atom,
};

• Each exported component in the default object is an atom — the content rendered inside a hotspot
• They appear in the digital version in the order listed
• Pass them as props to the generated page component in page.tsx

Usage in page.tsx

import { PageMyImage } from "@/@generated/PageMyImage";
import { Area1Atom, Area2Atom } from "./atoms";

export default function Page030() {
  return (
    <PageMyImage
      area1={<Area1Atom />}
      area2={<Area2Atom />}
    />
  );
}

The prop names (area1, area2) must match the hotspot names defined in the Hotspot Editor.

What to put in atoms

Atoms can contain text, images, exercises, or any React content. Use them for:

• Explanations that appear when the user clicks a region
• Interactive exercises overlaid on the page
• Definitions, hints, or additional context

Images

Static image imports used by a page's atoms are preloaded while that page is open in print or side-by-side mode, so opening a hotspot does not wait on a cold image fetch.

import photo from "./photo.jpg";
import diagram from "@/book/_components/diagram.png";

export function Area1Atom() {
  return <img src={photo} alt="" />;
}

No extra export is required, regardless of where the file lives. For URLs built only at runtime, export atomImageSrcs:

export const atomImageSrcs = ["https://example.com/figure.png"];