Visual Mode

Visual Mode allows you to design PDFs using React components with real-time preview. This guide explains how to use Visual Mode effectively.

Overview

Visual Mode is ideal when you want to:

• Design PDFs with immediate visual feedback
• Use existing React components
• Create templates with complex layouts
• Fine-tune styling and positioning

Basic Usage

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

function PDFDesigner() {
  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>

      {/* PDF Content */}
      <div ref={pdfRef} className="pdf-container">
        <h1>Document Title</h1>
        <div className="content-section">
          <p>Your content here...</p>
        </div>
      </div>
    </div>
  );
}

Styling in Visual Mode

CSS Classes

<div ref={pdfRef}>
  <style>
    {`
      .pdf-header {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 20px;
        text-align: center;
      }

      .pdf-section {
        margin: 15px 0;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
      }

      .pdf-table {
        width: 100%;
        border-collapse: collapse;
      }

      .pdf-table th,
      .pdf-table td {
        border: 1px solid #ddd;
        padding: 8px;
      }
    `}
  </style>

  <h1 className="pdf-header">Document Title</h1>
  <div className="pdf-section">
    <p>Section content...</p>
  </div>
  <table className="pdf-table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
    </tbody>
  </table>
</div>

Inline Styles

<div ref={pdfRef}>
  <h1
    style={{
      fontSize: "24px",
      color: "#2c3e50",
      textAlign: "center",
      marginBottom: "20px",
    }}
  >
    Document Title
  </h1>
  <div
    style={{
      margin: "15px 0",
      padding: "20px",
      backgroundColor: "#f8f9fa",
      borderRadius: "8px",
    }}
  >
    <p>Section content...</p>
  </div>
</div>

Page Breaking

Visual Mode includes smart page breaking that handles:

Automatic Page Breaks

Content automatically flows across pages based on:

• Content height
• Page size
• Margins
• Element types

Prevent Page Break Using: no-break class

Headers and Footers

Add consistent headers and footers:

const { pdfRef, downloadPDF } = useEasyPdf({
  header: {
    text: "Company Document",
    fontSize: 12,
    marginTop: 20,
    align: "center",
  },
  footer: {
    text: "Page {pageNumber} of {totalPages}",
    fontSize: 10,
    marginBottom: 20,
    align: "center",
  },
});

Watermarks

Add watermarks to your PDF:

const { pdfRef, downloadPDF } = useEasyPdf({
  watermark: {
    text: "CONFIDENTIAL",
    fontSize: 60,
    color: "#888888",
    opacity: 0.2,
    angle: -45,
  },
});

Best Practices

1. Layout Structure

   • Use semantic HTML elements
   • Create clear content hierarchy
   • Group related content in sections

2. Styling

   • Use consistent styling throughout
   • Define reusable CSS classes
   • Test with different content lengths

3. Performance

   • Optimize images before including
   • Use appropriate font sizes
   • Test with representative content

4. Testing

   • Test with different page sizes
   • Verify page breaks
   • Check print preview

Examples

Complex Layout

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

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

      <div ref={pdfRef}>
        <style>
          {`
            .pdf-container {
              font-family: Arial, sans-serif;
              color: #333;
            }

            .header {
              text-align: center;
              margin-bottom: 30px;
            }

            .section {
              margin: 20px 0;
              padding: 20px;
              background: #f9f9f9;
              border-radius: 8px;
            }

            .grid {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 20px;
            }

            .footer {
              margin-top: 30px;
              text-align: center;
              font-size: 12px;
            }
          `}
        </style>

        <div className="pdf-container">
          <div className="header">
            <h1>Project Report</h1>
            <p>Generated on {new Date().toLocaleDateString()}</p>
          </div>

          <div className="section">
            <h2>Executive Summary</h2>
            <p>Summary content...</p>
          </div>

          <div className="grid">
            <div className="section">
              <h3>Section 1</h3>
              <p>Content...</p>
            </div>
            <div className="section">
              <h3>Section 2</h3>
              <p>Content...</p>
            </div>
          </div>

          <div className="footer">
            <p>© 2024 Your Company</p>
          </div>
        </div>
      </div>
    </div>
  );
}

Related

• Configuration Guide
• Programmatic Mode
• Examples