react-pdf-highlighter-plus

Interface ShapeHighlightProps

The props type for ShapeHighlight.

interface ShapeHighlightProps {
    bounds?: string | Element;
    colorPresets?: string[];
    deleteIcon?: ReactNode;
    endPoint?: {
        x: number;
        y: number;
    };
    highlight: ViewportHighlight;
    isScrolledTo?: boolean;
    shapeType?: ShapeType;
    startPoint?: {
        x: number;
        y: number;
    };
    strokeColor?: string;
    strokeWidth?: number;
    style?: CSSProperties;
    styleIcon?: ReactNode;
    onChange?(rect): void;
    onContextMenu?(event): void;
    onDelete?(): void;
    onEditEnd?(): void;
    onEditStart?(): void;
    onStyleChange?(style): void;
}

Properties

bounds? colorPresets? deleteIcon? endPoint? highlight isScrolledTo? shapeType? startPoint? strokeColor? strokeWidth? style? styleIcon?

Methods

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

Properties

Optional bounds

bounds?: string | Element

react-rnd bounds on the highlight area.

Optional colorPresets

colorPresets?: string[]

Custom color presets for the style panel.

Optional deleteIcon

deleteIcon?: ReactNode

Custom delete icon. Replaces the default trash icon.

Optional endPoint

endPoint?: {
    x: number;
    y: number;
}

For arrows: end point as percentage of bounding box (0-1).

Type declaration

  • x: number
  • y: number

highlight

highlight: ViewportHighlight

The highlight to be rendered as a ShapeHighlight.

Optional isScrolledTo

isScrolledTo?: boolean

Has the highlight been auto-scrolled into view?

Optional shapeType

shapeType?: ShapeType

The type of shape to render.

Default

"rectangle"

Optional startPoint

startPoint?: {
    x: number;
    y: number;
}

For arrows: start point as percentage of bounding box (0-1).

Type declaration

  • x: number
  • y: number

Optional strokeColor

strokeColor?: string

Stroke color for the shape.

Default

"#000000"

Optional strokeWidth

strokeWidth?: number

Stroke width for the shape.

Default

2

Optional style

style?: CSSProperties

Custom styling for the container.

Optional styleIcon

styleIcon?: ReactNode

Custom style icon. Replaces the default palette icon.

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