react-pdf-wrapper/README.md

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 t

# 📄 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](https://pip.pypa.io/en/stable/) to install react-pdf-wrapper.

```bash
npm i react-pdf-wrapper
```

## Usage

```python
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:

```python
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.

###

###