📄 react-pdf-wrapper

A lightweight and flexible React wrapper for exporting fully customized, multi-page PDFs directly from your React components. Say goodbye to generic, static PDF layouts — simply wrap your content with our component to deliver elegant, branded documents tailored to your users.

Installation

Use the package manager npm to install react-pdf-wrapper.

npm i react-pdf-wrapper

Usage

import React, { useRef } from "react";
import PdfWrapper from "react-pdf-wrapper";

const MyComponent = () => {
  const pdfRef = useRef();
  const page1Ref = useRef();
  const page2Ref = useRef();

  const handleDownload = () => {
    pdfRef.current?.handleDownloadPDF();
  };

  return (
    <>
      <button onClick={handleDownload}>Download PDF</button>

      <PdfWrapper
        ref={pdfRef}
        pageRefs={[page1Ref, page2Ref]}
        pdfName="custom-report"
      >
         <div
           className="flex flex-col gap-4 min-h-[405mm] max-h-[406mm] bg-[#F5F6FF]"
           ref={page1Ref}
          >
          <h1>Page 1</h1>
          <p>This is the content of the first page.</p>
        </div>

         <div
           className="flex flex-col gap-4 min-h-[405mm] max-h-[406mm] bg-[#F5F6FF]"
           ref={page2Ref}
          >
          <h1>Page 2</h1>
          <p>This is the content of the second page.</p>
        </div>
      </PdfWrapper>
    </>
  );
};

export default MyComponent;

Triggering Download

This method is exposed via ref. You can trigger it from anywhere:

pdfRef.current?.handleDownloadPDF();

Output Format

The PDF is rendered in portrait mode with a large page size ([250mm, 410mm]) optimized for long, scrollable content (e.g., dashboards, profile reports).

✨ Features

✅ Multi-page PDF generation Add as many pages as you like — just pass an array of refs pointing to your React components. Each ref will become a separate page in the PDF.

🧾 Portrait mode with high vertical space PDFs are generated in portrait mode with a large scrollable layout of [250mm, 410mm], perfect for dashboards, profiles, reports, and more.

🎨 Fully customizable layout using React Forget boring static PDFs — use your own React components and Tailwind/CSS styling, and let your users download beautiful, branded documents with a single click.