Lock annotation in React Pdfviewer component

5 Jan 20241 minute to read

The PDF Viewer library allows you to lock the rectangle or square annotations using the isLock property in the rectangleSettings.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample in React.

Step 2: Add the following code snippet to lock the rectangle or square annotations.

Standalone

<PdfViewerComponent
      id="container"
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
       resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
      // lock annotation
      rectangleSettings={{ isLock: true }}
      style={{ height: '640px' }}>
      </PdfViewerComponent>

Server-Backed

<PdfViewerComponent
      id="container"
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
       serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
      // lock annotation
      rectangleSettings={{ isLock: true }}
      style={{ height: '640px' }}>
      </PdfViewerComponent>

Find the Sample how to lock square or rectangle annotations