react-pdf-highlighter-plus

Interface DrawingHighlightProps

The props type for DrawingHighlight.

interface DrawingHighlightProps {
    bounds?: string | Element;
    deleteIcon?: ReactNode;
    dragIcon?: ReactNode;
    highlight: ViewportHighlight;
    isScrolledTo?: boolean;
    style?: CSSProperties;
    onChange?(rect): void;
    onContextMenu?(event): void;
    onDelete?(): void;
    onEditEnd?(): void;
    onEditStart?(): void;
    onStyleChange?(newImage, newStrokes): void;
}

Properties

bounds? deleteIcon? dragIcon? highlight isScrolledTo? style?

Methods

onChange? onContextMenu? onDelete? onEditEnd? onEditStart? onStyleChange?

Properties

Optional bounds

bounds?: string | Element

react-rnd bounds on the highlight area.

Optional deleteIcon

deleteIcon?: ReactNode

Custom delete icon. Replaces the default trash icon.

Optional dragIcon

dragIcon?: ReactNode

Custom drag icon. Replaces the default 6-dot grid icon.

highlight

highlight: ViewportHighlight

The highlight to be rendered as a DrawingHighlight. The highlight.content.image should contain the drawing as a PNG data URL.

Optional isScrolledTo

isScrolledTo?: boolean

Has the highlight been auto-scrolled into view?

Optional style

style?: CSSProperties

Custom styling for the container.

Methods

Optional onChange

  • onChange(rect): void

  • A callback triggered whenever the highlight position or size changes.

    Parameters

    • rect: LTWHP

      The updated highlight area.

    Returns void

Optional onContextMenu

  • onContextMenu(event): void

  • A callback triggered on context menu.

    Parameters

    • event: MouseEvent<HTMLDivElement, MouseEvent>

    Returns void

Optional onDelete

Optional onEditEnd

Optional onEditStart

Optional onStyleChange

  • onStyleChange(newImage, newStrokes): void

  • Callback when drawing style changes (color or stroke width). The newImage is the re-rendered PNG data URL with updated styles. The newStrokes contain the updated stroke data.

    Parameters

    Returns void