Selecting a rectangle in a Pdf Document - React

If you set a PdfPages component's usermode to UserMode.DrawSelectionRectangle you can draw selection rectangles. After you've drawn the rectangle the rectangleSelect event fires and you can extract the coordinates of your rectangle.

await _pages.setUserMode(UserMode.DrawSelectionRectangle);
_pages.addEventListener("rectangleselect", async (ev: Event) => {
  setSelected({ ...(ev as CustomEvent).detail });
});

See below for a full example.

Screenshot

Code

src/App.tsx

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

import { 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 pdfApplication = useRef<HTMLPdfApplicationElement>(null);
  const pdfDocument = useRef<HTMLPdfDocumentElement>(null);
  const pdfPages = useRef<HTMLPdfPagesElement>(null);

  const [selected, setSelected] = useState();

  useEffect(() => {
    const addImageToPage = async () => {
      if (pdfApplication.current) {
        if (pdfDocument.current) {
          if (pdfPages.current) {
            const _pages = pdfPages.current;

            if (_pages) {
              //#region set_mode_and_event_listener
              await _pages.setUserMode(UserMode.DrawSelectionRectangle);
              _pages.addEventListener("rectangleselect", async (ev: Event) => {
                setSelected({ ...(ev as CustomEvent).detail });
              });
              //#endregion set_mode_and_event_listener
            }
          }
        }
      }
    };
    addImageToPage();
  }, []);

  return (
    <>
      <h1>UnoPdf Example: Draw selection rectangle in React</h1>

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

      <PdfDocument ref={pdfDocument} />
      <PdfUploader />

      <div style={{ display: "flex" }}>
        <div>
          <PdfPages ref={pdfPages} />
        </div>
        <div>
          <div style={{ padding: "10px" }}>
            You can draw a selection rectangle on the page using your mouse.
          </div>
          {selected && (
            <div style={{ padding: "10px" }}>
              You selected: {JSON.stringify(selected)}
            </div>
          )}
        </div>
      </div>
    </>
  );
}

export default App;

Running the example

• Download the react - Selecting a rectangle in a Pdf Document project
• Unzip the file to a directory react-draw-selection-rectangle.
  MacOS

  unzip react-draw-selection-rectangle.zip -d react-draw-selection-rectangle

• Open a terminal and go to that directory

  cd react-draw-selection-rectangle

• Install dependencies
  npm

  npm install

  yarn

  yarn

• Start the project
  npm

  npm run start

  yarn

  yarn start