DOCSEARCHbyAlgolia
Submit Docs

@fileforge/react-print Documentation

repository·main·Indexed 25 days ago

https://github.com/onedoclabs/react-print-pdf

A library of unstyled React and TypeScript components for building complex PDF layouts. It provides tools for managing document structures—including PageTop, PageBottom, PageBreak, and Margins—and a compile function to transform React components into HTML for PDF generation. Features include support for LaTeX formulas, Markdown rendering with TOC, interactive signature Fields, and Emotion CSS integration.

Tokens
31.5K
Snippets
110
Records
146
Agent score
81%

What's inside @fileforge/react-print

  1. Browse available UI templates

    main

    The @fileforge/react-print library provides several pre-built UI templates for generating professional PDF documents. These templates are categorized by document type and can be used as starting points for your print layouts.

    Available Template Categories:

    Reports

    • scientific-report: A scientific-style report template.
    • report-charts: A report template designed to include charts.

    Receipts

    • receipt: A standard receipt template.

    NDA (Non-Disclosure Agreements)

    • nda-markdown: An NDA template that utilizes Markdown for content.

    Invoices

    • invoice: A basic invoice template.
    • invoice-advanced: An advanced invoice template that includes QR code support.

  2. Use specialized React components for print documents

    main

    The @fileforge/react-print package provides several specialized components designed to handle common print-specific tasks such as rendering math, markdown, or dynamic document variables. Available components include:

    • compile: Compiles a React component to a string using Onedoc print styles.
    • CSS: Securely adds CSS to the document with parsing and escaping.
    • Footnote: Creates automatically numbered footnotes.
    • LaTeX: Renders LaTeX formulas within React components.
    • Markdown: Renders Markdown content inside templates.
    • Shell: Displays content in other page regions.
    • Signature: Adds signature fields to the document.
    • Tailwind: Provides a drop-in way to use Tailwind CSS in components.
    • Variables: Displays dynamic document values like page numbers and running headers.

  3. Understand the React Print workflow

    main

    React Print is a library for designing PDFs using React and TypeScript. It does not generate a .pdf file directly; instead, it outputs an HTML string. This HTML string is intended to be passed to a renderer to generate the final PDF.

    For the best experience, it is recommended to use the FileForge API, which is specifically built to work with the HTML output from React Print.

  5. Use Tailwind and layout components in templates

    main

    When building document templates (like invoices), you can use the <Tailwind> wrapper component from @fileforge/react-print to enable Tailwind CSS utility classes within your document structure.

    Additionally, the library provides specialized layout components to handle document-specific positioning:

    • <Footnote>: Used to insert supplemental information or notes within the text flow.
    • <PageBottom>: Used to define content that should appear at the bottom of a page (e.g., page numbers, footer text).
    • <Tailwind>: A wrapper that enables Tailwind CSS styling for the enclosed content.
    import { Footnote, PageBottom, Tailwind } from "@fileforge/react-print";

<Tailwind>
  <div>
    <p>
      All items below correspond to work completed in the month of January 2024.
      <Footnote>This includes non-business days.</Footnote>
    </p>

    <PageBottom>
      <div className="text-gray-400 text-sm">Invoice #1234</div>
    </PageBottom>
  </div>
</Tailwind>

  6. Use counters to reference page numbers and custom indices

    main

    You can use CSS target-counter() to automatically display the page number or a custom counter value of the linked target. This is useful for creating dynamic references like (see page 5) or (see section 2).

    Page Numbers

    Use the page counter to reference the printed page number of the target:

    a:after {
  content: " (see page " target-counter(attr(href), page) ")";
}

    Custom Counters

    You can also reference custom counters (e.g., section numbers) that you have defined and incremented within your document using counter-reset and counter-increment.

    <style>
  html {
    counter-reset: section;
  }

  section {
    counter-increment: section;
  }

  section::before {
    content: "Section " counter(section) ": ";
  }

  a:after {
    content: " (see section " target-counter(attr(href), section) ")";
  }
</style>

<a href="#section-1">Section 1</a>

<section id="section-1">
  <!-- The content of section 1 -->
</section>

  7. Create a document template for Onedoc

    main

    Onedoc requires a React component to serve as your document template.

    1. Create a components directory.
    2. Create a file (e.g., components/pdf-template.jsx) that exports a React component.
    3. (Optional) Create a stylesheet.css in your root directory for styling.

    Note: If using a framework like Tailwind, you must provide a compiled stylesheet as an asset.

    import * as React from "react";

export const PDFTemplate = ({ name }) => {
  return (
    <div>
      <h1> Hello {name} !</h1>
    </div>
  );
};

  9. Configure page margins

    main

    Margins are set using the CSS @page { margin } rule.

    Warning: If you use <PageTop> or <PageBottom> components, ensure your margins are large enough to prevent the header and footer from being clipped. It is recommended to use absolute units (e.g., in, cm) rather than relative units (e.g., em, rem) for print reliability.

    <CSS>
{\`
@page {
    margin: 1in;
}
\`}
</CSS>

  10. Use Tailwind and CSS components in @fileforge/react-print

    main

    When building advanced document templates, you can wrap your content in <Tailwind> and <CSS> components provided by @fileforge/react-print. This allows you to use Tailwind utility classes for layout and styling, and standard CSS for global styles like @page definitions (size, margins) and font imports.

    Key components used in advanced templates:

    • <Tailwind>: Enables Tailwind CSS utility classes within the document.
    • <CSS>: Allows injecting raw CSS strings for page setup and custom styles.
    • <PageBottom>: Defines content that should appear at the bottom of every page.
    • <Footnote>: Used to add supplemental information, which can be styled with footnoteDisplay: "inline" to appear within text flow.
    import { Footnote, PageBottom, Tailwind, CSS } from "@fileforge/react-print";

<Tailwind>
  <CSS>
    {`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

      @page {
        size: a4;
        margin: .75in .75in 1in .75in;
      }
      `}
  </CSS>
  <div className="font-[inter] text-slate-800">
    <PageBottom>
      <div className="text-xs text-slate-400 border-t border-t-slate-300 py-4 mt-4 flex border-b border-b-slate-300">
        <div className="flex-grow">Invoice #1234</div>
        <div>Powered by Kube</div>
      </div>
    </PageBottom>
    {/* Document Content */}
  </div>
</Tailwind>