The MarginBox
component allows you to position content in the margins of printed pages. It’s particularly useful for adding headers, watermarks, and other content that needs to appear in the margin areas of your printed documents.
For page numbers and footers, we recommend using the Footer component which provides built-in page numbering functionality.
Usage
The MarginBox
component uses CSS Paged Media specifications to position content in specific margin boxes around your page.
import { MarginBox } from "@htmldocs/react";
export default function Document() {
return (
<MarginBox
position="top-right"
runningName="document-title"
>
Quarterly Report
</MarginBox>
);
}
Props
Specifies where the content should appear in the page margins. See Position Options below for valid values.
A unique identifier for this margin box content. Must be unique across your document.
The content to display in the margin box.
pageType
'all' | 'even' | 'odd' | 'blank'
default:"'all'"
Controls which pages the margin box appears on:
'all'
: Appears on all pages
'even'
: Only appears on even-numbered pages
'odd'
: Only appears on odd-numbered pages
'blank'
: Only appears on blank pages
Additional CSS classes to apply to the margin box.
Custom React CSS styles for the margin box content.
CSS styles specifically for the margin box container.
Position Options
The position
prop accepts the following values:
Top Positions:
- 'top-left-corner' // Top left corner of the page
- 'top-left' // Top left margin
- 'top-center' // Top center margin
- 'top-right' // Top right margin
- 'top-right-corner' // Top right corner of the page
Left/Right Positions:
- 'left-top' // Left margin, top aligned
- 'left-middle' // Left margin, middle aligned
- 'left-bottom' // Left margin, bottom aligned
- 'right-top' // Right margin, top aligned
- 'right-middle' // Right margin, middle aligned
- 'right-bottom' // Right margin, bottom aligned
Bottom Positions:
- 'bottom-left-corner' // Bottom left corner of the page
- 'bottom-left' // Bottom left margin
- 'bottom-center' // Bottom center margin
- 'bottom-right' // Bottom right margin
- 'bottom-right-corner'// Bottom right corner of the page
Examples
<MarginBox
position="top-right"
runningName="document-title"
pageType="even"
style={{
fontStyle: 'italic',
color: '#666'
}}
>
{documentTitle}
</MarginBox>
Watermark
<MarginBox
position="left-middle"
runningName="watermark"
style={{
fontFamily: 'Arial, sans-serif',
color: 'rgba(0, 0, 0, 0.1)',
fontSize: '24px',
transform: 'rotate(-90deg)'
}}
>
<div>CONFIDENTIAL</div>
</MarginBox>
Responses are generated using AI and may contain mistakes.