Quick Start

Get started with EasyPdf in just a few minutes. EasyPdf is completely free and open source, providing all features without any restrictions.

Installation

npm install @easypdf/react
# or
yarn add @easypdf/react

Basic Example

Here's a minimal example to generate a PDF:

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

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

  const handleDownload = async () => {
    try {
      await downloadPDF(pdfRef, {
        filename: "example.pdf",
      });
    } catch (error) {
      console.error("Failed to generate PDF:", error);
    }
  };

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

      {/* Content container with pdfRef */}
      <div ref={pdfRef}>
        <h1>Hello, PDF!</h1>
        <p>This is a simple PDF document.</p>
      </div>
    </div>
  );
};

Programmatic Usage

Generate PDFs without rendering to the screen:

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

const ProgrammaticPDF = () => {
  const { createPDFBlob, downloadPDF, isCreatingBlob } = useEasyPdf();

  const content = (
    <div>
      <h1>Generated PDF</h1>
      <p>This content will be rendered to PDF directly.</p>
    </div>
  );

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

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

Configuration

Customize the PDF output with various options:

const config = {
  // Page settings
  pageSize: "A4",
  margins: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },

  // Styling
  styles: {
    backgroundColor: "#ffffff",
    defaultFontSize: 12,
    defaultFontFamily: "Arial, sans-serif",
    defaultTextColor: "#333333",
  },
};

// Use in your component
const handleDownload = async () => {
  await downloadPDF(pdfRef, config);
};

Next Steps

• Learn about Configuration Options
• See Examples