useEasyPdf Hook API Reference

The useEasyPdf hook is the main interface for generating PDFs in both visual and programmatic modes.

Basic Usage

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

function PDFGenerator() {
  const { pdfRef, downloadPDF } = useEasyPdf();

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)}>Download PDF</button>
      <div ref={pdfRef}>
        <h1>Hello, PDF!</h1>
      </div>
    </div>
  );
}

Hook Return Values

Name	Type	Description
pdfRef	React.RefObject<HTMLElement>	Reference to attach to the PDF content container
downloadPDF	(ref: React.RefObject<HTMLElement>, config?: PDFConfig) => Promise<void>	Function to generate and download PDF
createPDFBlob	(content: React.ReactNode, config?: PDFConfig) => Promise<Blob>	Function to generate PDF blob
isDownloadingPDF	boolean	Whether a PDF is currently being downloaded
isCreatingBlob	boolean	Whether a PDF blob is being created
error	Error | null	Error object if PDF generation fails

Configuration

The hook accepts a configuration object that sets default values for all PDF generations:

const { pdfRef, downloadPDF } = useEasyPdf({
  pageSize: "A4",
  margins: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },
  styles: {
    backgroundColor: "#ffffff",
    defaultFontSize: 12,
    defaultFontFamily: "Arial, sans-serif",
  },
});

See Configuration Guide for all available options.

Methods

downloadPDF

Downloads a PDF generated from a React ref or content.

// With ref (Visual Mode)
await downloadPDF(pdfRef, {
  filename: "document.pdf",
  watermark: {
    text: "CONFIDENTIAL",
  },
});

// With content (Programmatic Mode)
await downloadPDF(
  <div>
    <h1>Hello, PDF!</h1>
  </div>,
  {
    filename: "document.pdf",
  }
);

Parameters

Name	Type	Description
source	React.RefObject<HTMLElement> | React.ReactNode	Content source for PDF
config?	PDFConfig	Optional configuration

createPDFBlob

Creates a PDF blob from React content.

const blob = await createPDFBlob(
  <div>
    <h1>Hello, PDF!</h1>
  </div>,
  {
    filename: "document.pdf",
  }
);

Parameters

Name	Type	Description
content	React.ReactNode	Content to convert to PDF
config?	PDFConfig	Optional configuration

Returns

Promise<Blob> - PDF blob that can be used for download, upload, or further processing.

Error Handling

The hook provides built-in error handling:

function PDFGenerator() {
  const { pdfRef, downloadPDF, isDownloadingPDF, error } = useEasyPdf();

  return (
    <div>
      {error && (
        <div className="error">Failed to generate PDF: {error.message}</div>
      )}

      <button onClick={() => downloadPDF(pdfRef)} disabled={isDownloadingPDF}>
        {isDownloadingPDF ? "Generating..." : "Download PDF"}
      </button>

      <div ref={pdfRef}>
        <h1>Hello, PDF!</h1>
      </div>
    </div>
  );
}

Loading States

The hook provides loading states for different operations:

function PDFGenerator() {
  const { pdfRef, downloadPDF, isDownloadingPDF, isCreatingBlob } =
    useEasyPdf();

  return (
    <div>
      <button
        onClick={() => downloadPDF(pdfRef)}
        disabled={isDownloadingPDF || isCreatingBlob}
      >
        {isDownloadingPDF
          ? "Downloading..."
          : isCreatingBlob
          ? "Generating..."
          : "Download PDF"}
      </button>
    </div>
  );
}

Examples

Visual Mode

function VisualPDFGenerator() {
  const { pdfRef, downloadPDF, isDownloadingPDF } = useEasyPdf({
    pageSize: "A4",
    margins: { top: 20, right: 20, bottom: 20, left: 20 },
  });

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)} disabled={isDownloadingPDF}>
        {isDownloadingPDF ? "Generating..." : "Download PDF"}
      </button>

      <div ref={pdfRef}>
        <h1>Document Title</h1>
        <p>Document content...</p>
      </div>
    </div>
  );
}

Programmatic Mode

function ProgrammaticPDFGenerator() {
  const { createPDFBlob, downloadPDF, isCreatingBlob } = useEasyPdf();

  const generatePDF = async () => {
    const content = (
      <div>
        <h1>Generated PDF</h1>
        <p>Generated content...</p>
      </div>
    );

    try {
      const blob = await createPDFBlob(content, {
        filename: "generated.pdf",
      });
      await downloadPDF(blob);
    } catch (error) {
      console.error("Failed to generate PDF:", error);
    }
  };

  return (
    <button onClick={generatePDF} disabled={isCreatingBlob}>
      {isCreatingBlob ? "Generating..." : "Generate PDF"}
    </button>
  );
}

With Custom Styling

function StyledPDFGenerator() {
  const { pdfRef, downloadPDF } = useEasyPdf({
    styles: {
      backgroundColor: "#ffffff",
      defaultFontSize: 12,
      defaultFontFamily: "Arial, sans-serif",
      defaultTextColor: "#333333",
      customCSS: `
        .pdf-title {
          font-size: 24px;
          color: #2c3e50;
          text-align: center;
          margin-bottom: 20px;
        }
        .pdf-section {
          margin: 15px 0;
          padding: 20px;
          background-color: #f8f9fa;
          border-radius: 8px;
        }
      `,
    },
  });

  return (
    <div>
      <button onClick={() => downloadPDF(pdfRef)}>Download PDF</button>

      <div ref={pdfRef}>
        <h1 className="pdf-title">Styled Document</h1>
        <div className="pdf-section">
          <p>Content with custom styling...</p>
        </div>
      </div>
    </div>
  );
}

Related

• Configuration Guide
• Visual Mode
• Programmatic Mode