UnoPDF

Appearance

Highlight fields - React ​

In this example we allow the user to highlight the fields in a pdf.

Prerequisites ​

This example assumes that there exists a document form.pdf in your storage. If you do not have such a document you can run the following command to add a document with fields under that name:

shell
node src/post-document.js

Screenshot ​

Screenshot op highlight-fields

Code ​

tsx
import {
  IPdfDocument,
  PdfApplication,
  PdfDocument,
  PdfPages,
  defineCustomElements,
} from "@tallcomponents/unopdf-react";

import { FormEvent, useEffect, useRef, useState } from "react";

defineCustomElements();

// Note: this example uses Vite and retrieves the keys from the environment.
// This should not be used in production.
// See the authentication section in the usage guide for more information.

const publickey = import.meta.env.VITE_PUBLIC_KEY;
const privatekey = import.meta.env.VITE_PRIVATE_KEY;

function App() {
  const [formDocument, setFormDocument] = useState<IPdfDocument>();
  const pdfApplication = useRef<HTMLPdfApplicationElement | null>(null);
  const pdfDocument = useRef<HTMLPdfDocumentElement | null>(null);
  const pdfPages = useRef<HTMLPdfPagesElement | null>(null);

  useEffect(() => {
    function getFormDocument() {
      if (pdfApplication.current) {
        pdfApplication.current.getDocuments().then((documents) => {
          const formDocument = documents.find(
            (doc) => doc.originalFileName == "form.pdf"
          );
          if (formDocument) {
            setFormDocument(formDocument);
          }
        });
      }
    }
    getFormDocument();
  }, [pdfApplication]);

  useEffect(() => {
    if (pdfDocument.current && formDocument && formDocument.id) {
      pdfDocument.current.open(formDocument.id);
    }
  }, [pdfDocument, formDocument]);

  const toggleHighlight = (ev: FormEvent<HTMLInputElement>) => {
    const highlight = (ev.target as HTMLInputElement).checked;
    const pages = pdfPages.current;
    pages?.setHighlightFields(highlight);
  };

  return (
    <>
      <h1>UnoPdf Example: HighLight Fields in React</h1>

      <PdfApplication
        ref={pdfApplication}
        publickey={publickey}
        privatekey={privatekey}
      />

      <PdfDocument ref={pdfDocument} />

      <div style={{ display: "flex" }}>
        <div>
          <PdfPages ref={pdfPages} />
        </div>
        <div>
          <div style={{ padding: "10px" }}>
            Check the box below to highlight all fields in the document
          </div>
          <div style={{ padding: "10px" }}>
            <label>
              <input type="checkbox" value="" onChange={toggleHighlight} />
              <span>Highlight fields</span>
            </label>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

Running the example ​

  • Download the react - Highlight Fields project
  • Unzip the file to a directory react-highlight-fields.
    shell
    unzip react-highlight-fields.zip -d react-highlight-fields
  • Open a terminal and go to that directory
    shell
    cd react-highlight-fields
  • Install dependencies
    shell
    npm install
    shell
    yarn
  • Start the project
    shell
    npm run start
    shell
    yarn start