Watermarks

This guide demonstrates how to add and customize watermarks in your PDF documents.

Basic Watermark

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

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

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          watermark: {
            text: "CONFIDENTIAL",
            fontSize: 60,
            color: "#FF0000",
            opacity: 0.2,
            angle: -45,
          },
        }}
      >
        <div className="p-8">
          <h1 className="text-3xl font-bold mb-6">Confidential Document</h1>
          <p className="text-gray-700">
            This document contains confidential information...
          </p>
        </div>
      </EasyPdf>
    </div>
  );
};

Custom Watermark Styles

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

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          watermark: {
            text: "DRAFT",
            fontSize: 72,
            color: "#000000",
            opacity: 0.1,
            angle: -30,
          },
        }}
      >
        <div className="p-8">
          <h1 className="text-3xl font-bold mb-6">Draft Document</h1>
          <p className="text-gray-700">
            This is a draft version of the document...
          </p>
        </div>
      </EasyPdf>
    </div>
  );
};

Multiple Watermarks

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

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          // Primary watermark
          watermark: {
            text: "CONFIDENTIAL",
            fontSize: 60,
            color: "#FF0000",
            opacity: 0.15,
            angle: -45,
          },
          // Additional watermarks can be added using CSS
        }}
      >
        <div className="relative p-8">
          {/* Additional watermark using CSS */}
          <div
            className="absolute inset-0 flex items-center justify-center pointer-events-none"
            style={{
              transform: "rotate(45deg)",
              fontSize: "40px",
              color: "rgba(0, 0, 0, 0.1)",
            }}
          >
            DO NOT COPY
          </div>

          <h1 className="text-3xl font-bold mb-6">Protected Document</h1>
          <p className="text-gray-700">
            This document is protected with multiple watermarks...
          </p>
        </div>
      </EasyPdf>
    </div>
  );
};

Conditional Watermarks

const ConditionalWatermark = () => {
  const { pdfRef, downloadPDF } = useEasyPdf();
  const [documentStatus] = useState("draft"); // Or "final"

  const getWatermarkConfig = (status) => {
    switch (status) {
      case "draft":
        return {
          text: "DRAFT",
          fontSize: 60,
          color: "#FF0000",
          opacity: 0.2,
          angle: -45,
        };
      case "final":
        return {
          text: "CONFIDENTIAL",
          fontSize: 60,
          color: "#000000",
          opacity: 0.1,
          angle: -45,
        };
      default:
        return null;
    }
  };

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          watermark: getWatermarkConfig(documentStatus),
        }}
      >
        <div className="p-8">
          <h1 className="text-3xl font-bold mb-6">
            {documentStatus.toUpperCase()} Document
          </h1>
          <p className="text-gray-700">Document content here...</p>
        </div>
      </EasyPdf>
    </div>
  );
};

Styled Watermarks

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

  return (
    <div>
      <EasyPdf
        ref={pdfRef}
        config={{
          watermark: {
            text: "CONFIDENTIAL",
            fontSize: 80,
            color: "#FF0000",
            opacity: 0.15,
            angle: -45,
            // Additional styling can be applied using CSS
          },
        }}
      >
        <div className="relative p-8">
          {/* Custom styled watermark using CSS */}
          <div
            className="absolute inset-0 flex items-center justify-center pointer-events-none"
            style={{
              transform: "rotate(-45deg)",
              background:
                "linear-gradient(45deg, transparent 0%, rgba(255,0,0,0.1) 100%)",
              fontSize: "60px",
              fontWeight: "bold",
              color: "rgba(255, 0, 0, 0.1)",
              textTransform: "uppercase",
              letterSpacing: "0.2em",
            }}
          >
            Confidential
          </div>

          <h1 className="text-3xl font-bold mb-6">Styled Watermark</h1>
          <p className="text-gray-700">
            This document demonstrates styled watermarks...
          </p>
        </div>
      </EasyPdf>
    </div>
  );
};

Best Practices

1. Visibility

   • Use appropriate opacity (0.1-0.3 recommended)
   • Test watermark visibility with different content
   • Consider contrast with background

2. Placement

   • Use appropriate angle for diagonal watermarks
   • Consider content layout
   • Test with different page sizes

3. Text Size

   • Use appropriate font size (40-80px recommended)
   • Consider document dimensions
   • Test readability

4. Performance

   • Use simple watermarks for better performance
   • Minimize complex styling
   • Consider file size impact

Related

• Basic Usage
• Custom Styling
• Headers and Footers