Basic Usage

Visual Mode

Attach pdfRef to any element and call downloadPDF(pdfRef) to capture it as a PDF.

import { useEasyPdf } from "@easypdf/react";

const VisualExample = () => {
  const { pdfRef, downloadPDF, isLoading, error } = useEasyPdf({
    pageSize: "A4",
    margins: { top: 20, right: 20, bottom: 20, left: 20 },
  });

  return (
    <div>
      <button
        onClick={() => downloadPDF(pdfRef, { filename: "example.pdf" })}
        disabled={isLoading}
      >
        {isLoading ? "Generating..." : "Download PDF"}
      </button>

      {error && <p style={{ color: "red" }}>Error: {error.message}</p>}

      <div ref={pdfRef} style={{ padding: "32px", fontFamily: "Arial, sans-serif" }}>
        <h1>Sample PDF Document</h1>

        <img
          src="https://picsum.photos/id/247/300/200"
          alt="Sample image"
          crossOrigin="anonymous"
          style={{ maxWidth: "300px", borderRadius: "8px" }}
        />

        <section style={{ marginTop: "24px" }}>
          <h2>Content Section</h2>
          <p>
            This content will be rendered in the PDF. You can include text,
            images, tables, and any HTML that the browser can render.
          </p>
        </section>
      </div>
    </div>
  );
};

Programmatic Mode

Use createPDF (or createPDFBlob) to generate a PDF from JSX without displaying it on screen.

import { useEasyPdf } from "@easypdf/react";

const ProgrammaticExample = () => {
  const { createPDF, createPDFBlob, viewPDF, isLoading, error } = useEasyPdf();

  const content = (
    <div style={{ padding: "32px", fontFamily: "Arial, sans-serif" }}>
      <h1>Programmatically Generated PDF</h1>
      <p>Generated at: {new Date().toLocaleString()}</p>
      <h2>Dynamic Content</h2>
      <p>This PDF was generated using the programmatic API.</p>
    </div>
  );

  return (
    <div>
      <button
        onClick={() => createPDF(content, { filename: "generated.pdf" })}
        disabled={isLoading}
      >
        {isLoading ? "Generating..." : "Download PDF"}
      </button>

      <button
        onClick={() => viewPDF(content)}
        disabled={isLoading}
        style={{ marginLeft: "8px" }}
      >
        Preview in New Tab
      </button>

      {error && <p style={{ color: "red" }}>Error: {error.message}</p>}
    </div>
  );
};

Configuration

Both modes accept the same PDFConfig. Pass it to useEasyPdf() for hook-level defaults, or to the individual method call.

const config = {
  pageSize: "A4",
  margins: { top: 20, right: 20, bottom: 20, left: 20 },
  filename: "document.pdf",
  styles: {
    backgroundColor: "#ffffff",
    defaultFontFamily: "Arial, sans-serif",
    defaultTextColor: "#333333",
  },
  header: { text: "My Company", align: "right", fontSize: 9 },
  footer: { text: "Page {pageNumber} of {totalPages}", align: "center", fontSize: 9 },
  watermark: { text: "DRAFT", opacity: 0.15, fontSize: 60 },
};

Best Practices

1. Error handling — always wrap calls in try/catch or read the error value:

   try {
     await downloadPDF(pdfRef, config);
   } catch (err) {
     console.error("PDF generation failed:", err);
   }

2. External images — add crossOrigin="anonymous" so html2canvas can capture them:

   <img src="https://example.com/image.jpg" crossOrigin="anonymous" alt="..." />

3. Loading state — disable buttons while isLoading is true to prevent double-clicks.

4. Scale — the default scale: 2 gives crisp output. Lower it (scale: 1) for smaller file sizes.

Related

• Configuration Guide
• useEasyPdf Hook