Hyperlink navigation in React PDF Viewer

14 Jul 20269 minutes to read

Overview

This guide shows how to configure hyperlink behavior in the React PDF Viewer: enable or disable links, control how links open, and handle hyperlink events. To use these features, ensure the @syncfusion/ej2-react-pdfviewer package is installed and the LinkAnnotation service is included in the Inject block in every example below.

Steps

By default, enableHyperlink={true} is set on the PdfViewerComponent, so links are interactive. Set the property to false to make links non-interactive.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    return (
        <div style={{ height: '100vh' }}>
            <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%' }}
                enableHyperlink={false}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Use the hyperlinkOpenState property to choose whether external links open in the current tab, a new tab, or a new window. The allowed values are CurrentTab (default), NewTab, and NewWindow.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    return (
        <div style={{ height: '100vh' }}>
            <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%' }}
                hyperlinkOpenState='NewTab'
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Use the hyperlinkClick and hyperlinkMouseOver events to intercept clicks or show custom tooltips. The examples below show how to log the hyperlink and optionally cancel navigation.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
    ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
    PageOrganizer, Inject, HyperlinkMouseOverArgs, HyperlinkClickEventArgs
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef, RefObject } from 'react';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const hyperlinkClick = (args: HyperlinkClickEventArgs) => {
        console.log('Hyperlink Clicked:', args.hyperlink);
        // To prevent the default navigation behavior, set args.cancel = true;
        // args.cancel = true;
    };
    const hyperlinkMouseOver = (args: HyperlinkMouseOverArgs) => {
        console.log('Mouse is over hyperlink:', args.hyperlinkElement.href);
    };
    return (
        <div style={{ height: '100vh' }}>
            <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%' }}
                hyperlinkClick={hyperlinkClick}
                hyperlinkMouseOver={hyperlinkMouseOver}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Troubleshooting

  • If links still open when enableHyperlink={false}, ensure the page uses the correct resourceUrl/serviceUrl and that LinkAnnotation is not being re-enabled elsewhere.
  • If events do not fire, verify that Inject includes LinkAnnotation and any other services shown in the examples.

See also