Guides

Custom Context Menu

Starting from ComPDF React Native SDK 2.6.0, the SDK supports custom context menu items and provides a corresponding click event callback mechanism to respond when users tap custom menu buttons.

For details on how to configure and add custom context menu items, see Context Menu.

Listening for Custom Context Menu Item Clicks

When creating the CPDFReaderView, you can listen for clicks on custom context menu items by setting the onCustomContextMenuItemTapped callback. For example:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    modeConfig: {
      initialViewMode: "annotations",
    },
  })}
  onCustomContextMenuItemTapped={(identifier: string, event: any) => {
    // Handle custom context menu item click here
  }}
/>

Callback Function Signature

(identifier: string, event: any) => void;

Parameter	Type	Description
identifier	String	The unique identifier of the clicked custom menu item. Set via CPDFContextMenuItem.
event	dynamic	Contextual data carried by the click event. The data structure varies depending on the menu type and context.

Event Data Structure Explanation

Note:event is typically returned as a Map<String, dynamic>. If the returned value contains objects like CPDFAnnotation or CPDFWidget, you can use their APIs to access detailed properties.

1) Global

screenshot (Screenshot-related menu)

event = {
  "identifier": string,
  "image": string,
};

Field	Type	Description
identifier	string	Menu item identifier
image	string	Base64 data of the screenshot

2) View Mode

textSelect (Text selection in view mode)

event = {
  "identifier": string,
  "text": string,
  "rect": CPDFRectF,
  "pageIndex": int,
};

Field	Type	Description
identifier	string	Menu item identifier
text	string	Selected text content
rect	CPDFRectF	The area of the text selection on the page
pageIndex	int	The page index where the text is located

3) Annotation Mode

textSelect (Text selection in annotation mode)

event = {
  "identifier": string,
  "text": string,
  "rect": CPDFRectF,
  "pageIndex": int,
};

longPressContent (Long press on page content)

event = {
  "identifier": string,
  "point": any,
  "pageIndex": int,
};

markupContent / soundContent / inkContent / shapeContent / freeTextContent / signStampContent / stampContent / linkContent

When the context menu corresponds to an annotation object (e.g., highlight, ink, shape, free text, signature/stamp, link, etc.), the event returns the corresponding annotation instance:

event = {
  "annotation": CPDFAnnotation,
};

4) Content Editor Mode

editTextAreaContent / editSelectTextContent

(Text area / selected text in content editing mode)

event = {
  "editArea": CPDFEditTextArea,
};

imageAreaContent (Image area in content editing mode)

event = {
  "imageArea": CPDFEditImageArea,
};

editPathContent (Path / Shape area in content editing mode)

event = {
  "editArea": CPDFEditPathArea,
};

longPressWithEditTextMode / longPressWithEditImageMode / longPressWithAllMode

(Long press operations in content editing mode)

event = {
  "point": any,
  "pageIndex": int,
};

5) Form Mode

textField / checkBox / radioButton / listBox / comboBox / signatureField / pushButton

(Form field-related context menu in form mode)

event = {
  "widget": CPDFWidget,
};