Footer

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

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

MarginBoxPosition

default:"'bottom-center'"

Footer position. Inherits all position options from MarginBox component.

'all' | 'even' | 'odd' | 'blank'

default:"'all'"

Controls which pages the footer appears on.

string

Custom CSS classes to apply to the footer.

React.CSSProperties

Custom inline styles for the footer content.

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>

Overview

Usage

Integrations

Components

Usage

Props

Examples

Default Page Numbers

Custom Page Number Format

Static Footer Content

​Usage

​Props

​Examples

​Default Page Numbers

​Custom Page Number Format

​Static Footer Content

Usage

Props

Examples

Default Page Numbers

Custom Page Number Format

Static Footer Content