react-pdf-highlighter-plus

Interface PdfHighlighterProps

The props type for PdfHighlighter.

interface PdfHighlighterProps {
    areaSelectionMode?: boolean;
    children: ReactNode;
    drawingStrokeColor?: string;
    drawingStrokeWidth?: number;
    enableDrawingMode?: boolean;
    enableShapeMode?: null | ShapeType;
    highlights: Highlight[];
    mouseSelectionStyle?: CSSProperties;
    pdfDocument: PDFDocumentProxy;
    pdfScaleValue?: PdfScaleValue;
    selectionTip?: ReactNode;
    shapeStrokeColor?: string;
    shapeStrokeWidth?: number;
    style?: CSSProperties;
    textSelectionColor?: string;
    enableAreaSelection?(event): boolean;
    enableFreetextCreation?(event): boolean;
    enableImageCreation?(event): boolean;
    onCreateGhostHighlight?(ghostHighlight): void;
    onDrawingCancel?(): void;
    onDrawingComplete?(dataUrl, position, strokes): void;
    onFreetextClick?(position): void;
    onImageClick?(position): void;
    onRemoveGhostHighlight?(ghostHighlight): void;
    onScrollAway?(): void;
    onSelection?(PdfSelection): void;
    onShapeCancel?(): void;
    onShapeComplete?(position, shape): void;
    utilsRef(pdfHighlighterUtils): void;
}

Properties

areaSelectionMode? children drawingStrokeColor? drawingStrokeWidth? enableDrawingMode? enableShapeMode? highlights mouseSelectionStyle? pdfDocument pdfScaleValue? selectionTip? shapeStrokeColor? shapeStrokeWidth? style? textSelectionColor?

Methods

enableAreaSelection? enableFreetextCreation? enableImageCreation? onCreateGhostHighlight? onDrawingCancel? onDrawingComplete? onFreetextClick? onImageClick? onRemoveGhostHighlight? onScrollAway? onSelection? onShapeCancel? onShapeComplete? utilsRef

Properties

Optional areaSelectionMode

areaSelectionMode?: boolean

When true, shows crosshair cursor indicating area selection mode is active. Use this when area selection should be persistently enabled (not just on modifier key).

children

children: ReactNode

This should be a highlight container/renderer of some sorts. It will be given appropriate context for a single highlight which it can then use to render a TextHighlight, AreaHighlight, etc. in the correct place.

Optional drawingStrokeColor

drawingStrokeColor?: string

Stroke color for drawing mode.

Default

"#000000"

Optional drawingStrokeWidth

drawingStrokeWidth?: number

Stroke width for drawing mode.

Default

3

Optional enableDrawingMode

enableDrawingMode?: boolean

Whether drawing mode is enabled.

Optional enableShapeMode

enableShapeMode?: null | ShapeType

The type of shape to create, or null if shape mode is not active.

highlights

highlights: Highlight[]

Array of all highlights to be organised and fed through to the child highlight container.

Optional mouseSelectionStyle

mouseSelectionStyle?: CSSProperties

Optional CSS styling for the rectangular mouse selection.

pdfDocument

pdfDocument: PDFDocumentProxy

PDF document to view and overlay highlights.

Optional pdfScaleValue

pdfScaleValue?: PdfScaleValue

What scale to render the PDF at inside the viewer.

Optional selectionTip

selectionTip?: ReactNode

Optional element that can be displayed as a tip whenever a user makes a selection.

Optional shapeStrokeColor

shapeStrokeColor?: string

Stroke color for shape mode.

Default

"#000000"

Optional shapeStrokeWidth

shapeStrokeWidth?: number

Stroke width for shape mode.

Default

2

Optional style

style?: CSSProperties

Style properties for the PdfHighlighter (scrollbar, background, etc.), NOT the PDF.js viewer it encloses. If you want to edit the latter, use the other style props like textSelectionColor or overwrite pdf_viewer.css

Optional textSelectionColor

textSelectionColor?: string

Coloring for unhighlighted, selected text.

Methods

Optional enableAreaSelection

  • enableAreaSelection(event): boolean

  • Condition to check before any mouse selection starts.

    Parameters

    • event: MouseEvent

      mouse event associated with the new selection.

    Returns boolean

    • True if mouse selection should start.

Optional enableFreetextCreation

  • enableFreetextCreation(event): boolean

  • Condition to check before freetext creation starts.

    Parameters

    • event: MouseEvent

      mouse event associated with the click.

    Returns boolean

    • True if freetext creation should occur.

Optional enableImageCreation

  • enableImageCreation(event): boolean

  • Condition to check before image creation starts.

    Parameters

    • event: MouseEvent

      mouse event associated with the click.

    Returns boolean

    • True if image creation should occur.

Optional onCreateGhostHighlight

  • onCreateGhostHighlight(ghostHighlight): void

  • Callback triggered whenever a ghost (non-permanent) highlight is created.

    Parameters

    Returns void

Optional onDrawingCancel

Optional onDrawingComplete

  • onDrawingComplete(dataUrl, position, strokes): void

  • Callback triggered when a drawing is completed.

    Parameters

    • dataUrl: string

      The drawing as a PNG data URL.

    • position: ScaledPosition

      Scaled position of the drawing on the page.

    • strokes: DrawingStroke[]

      The stroke data for later editing.

    Returns void

Optional onFreetextClick

Optional onImageClick

Optional onRemoveGhostHighlight

  • onRemoveGhostHighlight(ghostHighlight): void

  • Callback triggered whenever a ghost (non-permanent) highlight is removed.

    Parameters

    Returns void

Optional onScrollAway

  • onScrollAway(): void

  • Event is called only once whenever the user changes scroll after the autoscroll function, scrollToHighlight, has been called.

    Returns void

Optional onSelection

  • onSelection(PdfSelection): void

  • Callback triggered whenever a user finishes making a mouse selection or has selected text.

    Parameters

    • PdfSelection: PdfSelection

      Content and positioning of the selection. NOTE: makeGhostHighlight will not work if the selection disappears.

    Returns void

Optional onShapeCancel

Optional onShapeComplete

utilsRef

  • utilsRef(pdfHighlighterUtils): void

  • Creates a reference to the PdfHighlighterContext above the component.

    Parameters

    • pdfHighlighterUtils: PdfHighlighterUtils

      various useful tools with a PdfHighlighter. See PdfHighlighterContext for more description.

    Returns void