@easypdf/react NPM

EasyPdf React

Features

🎨 Visual Mode: Design PDFs using React components with real-time preview
🚀 Programmatic Mode: Generate PDFs dynamically with programmatic content creation
📝 Rich Text Support: Full support for text formatting, lists, tables, and more
🖼️ Image Support: Include images in your PDFs with automatic optimization
🎯 Page Breaking: Smart page breaking algorithm for optimal content flow
💅 Styling: Full CSS support including flexbox and grid layouts
🎭 Themes: Built-in themes and support for custom themes
📏 Headers & Footers: Customizable headers and footers
💧 Watermarks: Add text or image watermarks
📱 Responsive: Adapts to different page sizes and orientations
⚡️ Non-Blocking: Smooth PDF generation that doesn't freeze the browser UI

Installation

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

Quick Start

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

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

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

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>
        <p>This content will be converted to PDF.</p>
      </div>
    </div>
  );
}