Syncfusion AI Assistant

How can I help you?

Text Search Events in React PDF Viewer

18 Mar 20264 minutes to read

The React PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process.

textSearchStart

The textSearchStart event fires as soon as a search begins from the toolbar interface or through the textSearch.searchText method. Use to reset UI state, log analytics, or cancel the default search flow before results are processed.

  • Event arguments: TextSearchStartEventArgs exposes:
    • searchText: the term being searched.
    • matchCase: indicates whether case-sensitive search is enabled.
    • name: event name.
  • TS
    • <PdfViewerComponent
    id="pdfViewer"
    ref={viewerRef}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    style={{ height: '100%' }}
    textSearchStart={(args: TextSearchStartEventArgs) => {
        console.log(`Text search started for: "${args.searchText}"`)
    }}
>
    <Inject
        services={[
            TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
            Annotation, FormDesigner, FormFields, PageOrganizer
        ]}
    />
</PdfViewerComponent>

    textSearchHighlight

    The textSearchHighlight event triggers whenever a search result is brought into view, including navigation between matches. Use to draw custom overlays or synchronize adjacent UI elements when a match is highlighted.

    • Event arguments: TextSearchHighlightEventArgs exposes:
      • bounds: RectangleBoundsModel representing the highlighted match.
      • pageNumber: page index where the match is highlighted.
      • searchText: the active search term.
      • matchCase: indicates whether case-sensitive search was used.
      • name: event name.
  • TS
    • <PdfViewerComponent
    id="PdfViewer"
    ref={viewerRef}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    style={{ height: '100%' }}
    textSearchHighlight={(args: TextSearchHighlightEventArgs) => {
        console.log('Highlighted match bounds:', args.bounds)
    }}
>
    <Inject
        services={[
            TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
            Annotation, FormDesigner, FormFields, PageOrganizer
        ]}
    />
</PdfViewerComponent>

    textSearchComplete

    The textSearchComplete event runs after the search engine finishes scanning the document for the current query. Use to update match counts, toggle navigation controls, or notify users when no results were found.

    • Typical uses:
      • Update UI with the total number of matches and enable navigation controls.
      • Hide loading indicators or show a “no results” message if none were found.
      • Record analytics for search effectiveness.
    • Event arguments: TextSearchCompleteEventArgs exposes:
      • searchText: the searched term.
      • matchCase: indicates whether case-sensitive search was used.
      • name: event name.
  • TS
    • <PdfViewerComponent
    id="PdfViewer"
    ref={viewerRef}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    style={{ height: '100%' }}
    textSearchComplete={(args: TextSearchCompleteEventArgs) => {
        console.log('Text search completed.', args)
    }}
>
    <Inject
        services={[
            TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
            Annotation, FormDesigner, FormFields, PageOrganizer
        ]}
    />
</PdfViewerComponent>

    View Sample in GitHub

    See Also