The Document component is used to create a layout for document pages. It provides a structured way to set the size, orientation, and margin of the document.

​
Usage

import Document from './Document';

const MyDocument = () => (
  <Document size="A4" orientation="portrait" margin="0.39in">
    <h1>My Document Content</h1>
    <p>This is the content of my document.</p>
  </Document>
);

​
Props

​
size
string
required

The size of the document. Must be one of: “A3”, “A4”, “A5”, “letter”, or “legal”.

​
orientation
string
required

The orientation of the document. Must be either “portrait” or “landscape”.

​
margin
string | React.CSSProperties['margin']

The margin of the document. Can be a string (e.g., “0.39in”) or a valid CSS margin value.

​
children
React.ReactNode
required

The content of the document.

​
Examples

​
A4 Portrait Document

import Document from './Document';

const A4Portrait = () => (
  <Document size="A4" orientation="portrait" margin="1in">
    <h1>A4 Portrait Document</h1>
    <p>This is an A4 portrait document with 1 inch margins.</p>
  </Document>
);

import Document from './Document';

const LegalLandscape = () => (
  <Document size="legal" orientation="landscape" margin="0.5in">
    <h1>Legal Landscape Document</h1>
    <p>This is a legal size landscape document with 0.5 inch margins.</p>
  </Document>
);