A minimal library to preview dynamic element
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.
---
* 📄 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
---
``bash`
npm install @fast-preview/core
pnpm add @fast-preview/core
yarn add @fast-preview/core
---
`tsx
import { Preview } from "@fast-preview/core";
export function App() {
return (
The content will be rendered at A4 size, scaled down (or up) to fit the available container.
---
Props
$3
ts
ReactNode
`The content to render inside the previewed page.
---
$3
ts
string | { width: number; height: number }
`Defines the target page size.
#### Preset formats
If a string is provided, it is resolved using
:`ts
`If the format is unknown, it falls back to
.#### Custom size
You can provide a custom width/height object:
`ts
width: 800,
height: 1120,
}}
>
...
`> 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
* Applies a CSS 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.$3
`ts
{
el: HTMLDivElement; // the page element
scale: number; // current applied scale
size: { width: number; height: number };
}
`$3
tsx
import { useContext } from "react";
import { PreviewContext } from "your-lib";function DebugInfo() {
const ctx = useContext(PreviewContext);
if (!ctx) return null;
return (
Scale: {ctx.scale}
Size: {ctx.size.width} × {ctx.size.height}
);
}
`---
Styling Notes
The component uses inline styles for layout:
* Container:
* centers content
* hides overflow
* light gray background (
)
* Page: * fixed width/height
* scaled using
transform: scale(...)
* You can override styles using the
and .projection` class names if needed.---
* Print preview UIs
* Resume / invoice / report editors
* PDF-like layout builders
* WYSIWYG document tools
---
Apache License 2