The Footer component provides an easy way to add page numbers and custom footers to your documents. It’s built on top of the MarginBox component with additional features for page numbering.

​
Usage

import { Footer } from "@htmldocs/react";

export default function Document() {
  return (
    <Footer />  {/* Renders "Page X of Y" by default */}
  );
}

​
Props

​
children
Function | React.ReactNode

Content to render in the footer. Can be either:

  • A function that receives { currentPage, totalPages } elements
  • A React node for static content
  • Omitted to use the default page numbering template
​
position
MarginBoxPosition
default:
"'bottom-center'"

Footer position. Inherits all position options from MarginBox component.

​
pageType
'all' | 'even' | 'odd' | 'blank'
default:
"'all'"

Controls which pages the footer appears on.

​
className
string

Custom CSS classes to apply to the footer.

​
style
React.CSSProperties

Custom inline styles for the footer content.

​
marginBoxStyles
React.CSSProperties

Custom styles applied to the MarginBox wrapper.

​
Examples

​
Default Page Numbers

The default template shows “Page X of Y”:

<Footer />

​
Custom Page Number Format

Use the function-as-children pattern to customize the page number display:

<Footer>
  {({ currentPage, totalPages }) => (
    <div style={{ fontFamily: 'monospace' }}>
      [{currentPage} / {totalPages}]
    </div>
  )}
</Footer>

​
Static Footer Content

Provide static content instead of page numbers:

<Footer>
  <div style={{ 
    display: 'flex', 
    justifyContent: 'space-between' 
  }}>
    <span>© 2024 Company Name</span>
    <span>Confidential</span>
  </div>
</Footer>
MarginBox