How to Lock Annotations in React PDF Viewer

14 Aug 20261 minute to read

The PDF Viewer supports locking annotations to prevent users from moving, resizing, or removing them. Locking can be applied via annotation settings or by handling viewer events and updating annotation metadata.

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

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

<PdfViewerComponent
      id="container"
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
       resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
       rectangleSettings={{ isLock: true }}
       style={{ height: '640px' }}>
      </PdfViewerComponent>
<PdfViewerComponent
      id="container"
       documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
       serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
       rectangleSettings={{ isLock: true }}
       style={{ height: '640px' }}>
      </PdfViewerComponent>

See the sample: how to lock square or rectangle annotations

See also