Guides

Context Menu

When creating a CPDFReaderView, you can customize the context menus that appear when annotations, text, images, or form fields are selected. This is done via the CPDFConfiguration object using the contextMenuConfig field.

Default Context Menu

By default, when a user selects a highlight annotation, ComPDF displays a context menu with common options such as “Note”, “Delete”, and “Properties”:

Android	iOS

Customizing Menu Items

You can customize the context menu by specifying which menu items to include. The following example only keeps the Properties and Delete options for highlight annotations:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    contextMenuConfig:{
      annotationMode: {
        markupContent: menus('properties', 'delete')
      }
    }
  })} />

Android	iOS

Custom Menu Items

The ComPDF React Native SDK added support for custom menu items in version 2.6.0. The following example demonstrates how to add custom menu items to the context menu for highlight annotations.

Step 1: Configure Custom Menu Items

Create a CPDFContextMenuItem instance to configure custom menu items:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    contextMenuConfig: {
      padding: [4, 0, 4, 0],
      iconSize: 40,
      fontSize: 14,
      annotationMode: {
        markupContent: menus(
          {
            key: "custom",
            identifier: "custom_show_annotation_properties_action", // Required: unique identifier
            title : 'Custom Action',             // Required: menu title (when showType is text)
            icon: "ic_test_properties",          // Optional: icon name (Android only, required when showType is icon)
            showType: "text",                    // Display type: icon or text
          }
        ),
      }
    },
  })}
  onCustomContextMenuItemTapped={handleCustomContextMenuItemTapped}
  />

Step 2: Handle Click Events

Handle click events for custom menu items through the onCustomContextMenuItemTapped callback:

const handleCustomContextMenuItemTapped = (identifier: string, event: any) => {
  if (identifier === 'custom_show_annotation_properties_action') {
    // Handle custom menu item click event
    // For example: display custom dialog, perform specific operations, etc.
    console.log('Custom menu item tapped:', event);
  }
};