Preview

Preview is a React component that automatically scales and centers a fixed-format page (e.g. A4) inside a responsive container. It’s especially useful for document previews, print layouts, PDF-like editors, or any UI where content must keep a strict page size while adapting to the viewport.

The component exposes a PreviewContext to its children, providing access to the rendered element, current scale, and page size.

---

Features

• 📄 Fixed page formats (A4, presets, or custom sizes)
• 📐 Automatic scaling based on container size
• 🔄 Recomputes scale on window resize
• 🎯 Centers content inside its container
• 🧠 Context API for scale & size awareness in children

---

Installation

npm install @fast-preview/core
pnpm add  @fast-preview/core
yarn add  @fast-preview/core

---

Basic Usage

import { Preview } from "@fast-preview/core";

export function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Preview format="A4">
        <div>Your page content</div>
      </Preview>
    </div>
  );
}

The content will be rendered at A4 size, scaled down (or up) to fit the available container.

---

Props

children (required)

ReactNode

The content to render inside the previewed page.

---

format (optional)

string | { width: number; height: number }

Defines the target page size.

Preset formats

If a string is provided, it is resolved using ScalePreset:

<Preview format="A4" />

If the format is unknown, it falls back to "A4".

Custom size

You can provide a custom width/height object:

<Preview
  format={{
    width: 800,
    height: 1120,
  }}
>
  ...
</Preview>

Units are assumed to be pixels.

⚠️ An error is thrown if the format is invalid.

---

Behavior

• The component measures its container size
• Computes the best scale using computeScale
• Applies a CSS transform: scale(...) to the page
• Recalculates automatically on window resize
• Children are rendered only after the page DOM node is mounted

---

PreviewContext

Children are wrapped in a PreviewContext.Provider once the page element is available.

Context value

{
  el: HTMLDivElement;   // the page element
  scale: number;       // current applied scale
  size: { width: number; height: number };
}

Example usage

import { useContext } from "react";
import { PreviewContext } from "your-lib";

function DebugInfo() {
  const ctx = useContext(PreviewContext);

  if (!ctx) return null;

  return (
    <div>
      Scale: {ctx.scale}
      <br />
      Size: {ctx.size.width} × {ctx.size.height}
    </div>
  );
}

---

Styling Notes

The component uses inline styles for layout:

• Container:

  • centers content
  • hides overflow
  • light gray background (#e5e5e5)

• Page:

  • fixed width/height
  • scaled using transform: scale(...)
  • transform-origin: top left

You can override styles using the .preview and .projection class names if needed.

---

Typical Use Cases

• Print preview UIs
• Resume / invoice / report editors
• PDF-like layout builders
• WYSIWYG document tools

---

License

Apache License 2