Personalize Annotation Selection Settings in React PDF Viewer

15 Jul 20261 minute to read

Use the annotationSelectorSettings property to customize the appearance and interaction behavior of the annotation selector in the React PDF Viewer UI.

The AnnotationSelectorSettingsModel defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.

Steps to configure annotation selector settings

  • Step 1: Create a PDF Viewer instance and initialize it.
  • Step 2: Set the annotationSelectorSettings property to customize selector behavior.
<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" style={{ 'height': '640px' }}
    annotationSelectorSettings={{
    selectionBorderColor: 'blue',
    resizerBorderColor: 'red',
    resizerFillColor: '#4070ff',
    resizerSize: 8,
    selectionBorderThickness: 1,
    resizerShape: 'Circle',
    selectorLineDashArray: [5, 6],
    resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
    resizerCursorType: CursorType.grab
    }}>
    <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner,PageOrganizer]}/>
</PdfViewerComponent>
  • Step 3: Append the viewer to the target HTML element using appendTo.

Key properties

  • selectionBorderColor: Sets the color for the border around selected annotations.
  • resizerBorderColor: Sets the color for the border of the resizer handles.
  • resizerFillColor: Defines the fill color for the resizer handles.
  • resizerSize: Determines the size of the resizer handles.
  • selectionBorderThickness: Specifies the thickness of the selection border.
  • resizerShape: Sets the shape of the resizer handles (for example, Circle or Square).
  • selectorLineDashArray: Specifies the dash pattern for the selector line.
  • resizerLocation: Determines where the resizer appear relative to the annotation (for example, Corners or Edges).
  • resizerCursorType: Sets the cursor style when hovering over a resizer.

View sample in GitHub