Getting Started

This guide will help you get started with EasyPdf in your React application. EasyPdf is completely free and open source.

Installation

1. Install the package:

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

2. Initialize EasyPdf in your app:

import { EasyPdfProvider, EasyPdf } from "@easypdf/react";

// Initialize EasyPdf
const easyPdf = EasyPdf.initialize();

function App() {
  return (
    <EasyPdfProvider instance={easyPdf}>
      <YourApp />
    </EasyPdfProvider>
  );
}

Basic Usage

Here's a simple example of generating 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>
  );
};

Configuration

You can customize various aspects of the PDF generation:

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",
  },

  // Optional watermark
  watermark: {
    text: "CONFIDENTIAL",
    fontSize: 60,
    opacity: 0.2,
  },
};

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

Next Steps

• Learn about Configuration Options
• See Examples